Button

Trigger actions and events with customizable buttons in multiple variants, sizes, and styles.

Installation

Usage

import { Button } from "@/registry/core/button";

export default () => <Button variant="primary">Click me</Button>;

Examples

Variants

<Button variant="primary">Primary</Button>
<Button variant="danger">Danger</Button>
<Button variant="success">Success</Button>
<Button variant="ghost">Ghost</Button>

Appearances

<Button appearance="fill">Filled</Button>
<Button appearance="outline">Outline</Button>

Sizes

<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>

With Icons

Icons are automatically adjusted based on the size and variant props

import { PlusAdd, Download } from "@tailgrids/icons";

<Button>
  <PlusAdd />
  Add Item
</Button>

<Button iconOnly>
  <Download />
</Button>

Disabled

<Button disabled>Disabled Button</Button>

API Reference

Extends button element props.

Accessibility

• Default type="button" prevents unintended form submissions
• Includes focus ring styling with focus:ring-3 for keyboard navigation
• Disabled state removes pointer events and applies appropriate visual styling
• Icons inherit text color for consistent styling
• All standard button HTML attributes are supported

Notes

• Icons are automatically adjusted based on the size and variant props
• The iconOnly prop adjusts padding to create square buttons for icon-only usage
• Ghost variant automatically adjusts focus ring size to ring-2 for subtler appearance
• Disabled buttons have pointer-events-none to prevent interaction