Button

React Button components are used to trigger actions such as submitting forms, opening dialogs, or starting processes. They are a core part of user interaction across interfaces.

This Button component is built with React and styled using Tailwind CSS, giving developers control over appearance, size, and interaction states.

Installation

Usage

Import the component and pass the required props.

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

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

Examples

Variants

Use variants to indicate the purpose of an action.

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

Appearances

Use appearances to control the visual style.

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

Sizes

Choose a size that fits the surrounding UI.

<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

Use the disabled state to prevent interaction.

<Button disabled>Disabled Button</Button>

API Reference

Extends button element props.

Accessibility

• Uses type="button" by default to avoid accidental form submission
• 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