Button

A button with variant and size styles.

Overview

Button renders a native button. Variants and sizes are the only style options. Other button attributes, including click handlers and ARIA attributes, are passed through.

Preview

Customize

Variant
Size
Icon
Text
Disabled

Installation

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add button

Usage

import { Button } from "@/components/ui/button";

export function SaveButton() {
  return <Button>Save</Button>;
}

Examples

With a field

The default button is the same height as Input, so a label, a field, and Save sit on one line on wider screens.

In practice

Save and Cancel close an account form. Labels, inputs, and a directory checkbox sit above the actions.

API

Other attributes for the underlying element are passed through.

NameTypeDefaultDescription
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"Visual style.
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"default is h-9 and matches Input. xs is h-7, sm is h-8, and lg is h-10. Icon sizes are square.
classNamestring—Merged onto the button with cn.
disabledboolean—Native disabled state. Uses a not-allowed cursor and reduced opacity.
type"button" | "submit" | "reset""button"A passed type replaces the default.
childrenReactNode—Visible button content. This is the accessible name when no other name is provided.

Accessibility

Button is a native button. It does not use a clickable div.

  • Enter and Space activate it when it has focus.
  • The visible children are the accessible name unless another name is set.
  • disabled prevents activation. The control stays in the accessibility tree.
  • Focus uses a visible focus-visible ring. Mouse clicks do not show that ring.