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
Install the component using the Tailgrids CLI.
npx @tailgrids/cli add buttonUsage
Import the component and pass the required props.
import { Button } from "@/components/tailgrids/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.
Fill:
Outline:
Sizes
Choose a size that fits the surrounding UI.
With Icons
Icons are automatically adjusted based on the size and variant props. Use iconOnly for buttons with just an icon.
Disabled
Pass the disabled prop to the field container to disable a button.
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
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'primary' | 'danger' | 'success' | 'ghost' | 'primary' | Visual style variant |
appearance | 'fill' | 'outline' | 'fill' | Filled or outlined style |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Button size |
iconOnly | boolean | false | Icon-only button (square aspect) |
disabled | boolean | false | Disable button interaction (maps to React Aria's isDisabled prop) |
pending | boolean | false | Whether the button is in a pending state |
onPress | (e: PressEvent) => void | - | Handler that is called when the press is released over the target |
readOnly | boolean | false | Prevent interaction while keeping focusable |
Accessibility
- Built using React Aria
Buttonwhich provides robust accessibility features across devices and input modalities - Full keyboard navigation and screen reader support out of the box
- Handles press events normalized across mouse, keyboard, and touch interactions
- Supports
pendingstate which is announced to assistive technologies while keeping the element focusable
