Button

A highly interactive element used to trigger actions, supporting multiple modern visual variants, sizes, and micro-animations.

Import

tsx

import { Button } from '@tac-ui/web';

Playground

Interactively configure the Button props below.

Variant

Size

Disabled

Label

tsx

<Button variant="primary" size="md">Button</Button>

Variants

Buttons come in several refined variants to establish clear visual hierarchy in the UI.

tsx

<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="point">Point</Button>
<Button variant="destructive">Destructive</Button>

Sizes

Buttons support three responsive sizes to fit various layouts.

tsx

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

With Icons

Enhance button context with leading or trailing icons.

tsx

import { Rocket, Send } from '@tac-ui/icon';

<Button leftIcon={<Rocket />}>Get Started</Button>
<Button variant="outline" rightIcon={<Send />}>Submit</Button>
<Button variant="secondary" iconOnly><Rocket /></Button>

Disabled

Disabled buttons are reduced in opacity and non-interactive.

tsx

<Button disabled>Disabled Primary</Button>
<Button variant="outline" disabled>Disabled Outline</Button>

API Reference

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "point" \| "destructive"	"primary"	Visual style variant of the button.
size	"sm" \| "md" \| "lg"	"md"	Size of the button.
leftIcon	React.ReactNode	-	Icon rendered to the left of the button label.
rightIcon	React.ReactNode	-	Icon rendered to the right of the button label.
iconOnly	boolean	false	Removes padding to properly center a single icon.
tilt	boolean	false	When true, applies a cursor-tracking 3D micro-tilt on hover.
disabled	boolean	false	Disables the button when true.
className	string	-	Additional CSS class names.