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

npx @tailgrids/cli add button

Usage

Import the component and pass the required props.

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

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

Examples

Variants

Use variants to indicate the purpose of an action.

Note: Ghost variant automatically adjusts focus ring size to ring-2 for subtler appearance.

Appearances

Use appearances to control the visual style.

Sizes

Choose a size that fits the surrounding UI.

With Icons

Icons are automatically adjusted based on the size and variant props.

Note: The iconOnly prop adjusts padding to create square buttons for icon-only usage.

Disabled

Use the disabled state to prevent interaction.

Note: Disabled buttons have pointer-events-none to prevent interaction.

Custom

You can use className to add custom styles or create custom states like loading.

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