Displays a button or a component that looks like a button.
Loading demo: button-real-world
npx sdaia-ui@latest add button
import { Button } from "@/components/ui/button"Use the `size` prop to change the size of the button.
Loading demo: button-size
The default button style.
Loading demo: button-primary
Use `style="Secondary - Solid"` for secondary actions.
Loading demo: button-secondary-solid
Use `style="Secondary - Outline"` for outlined secondary actions.
Loading demo: button-secondary-outline
Use variant="neutral" for high-contrast dark actions (Figma Style=Neutral).
Loading demo: button-neutral
Use `style="Subtle"` for low-emphasis inline actions.
Loading demo: button-subtle
Use variant="transparent" for link-style actions (Figma Style=Transparent).
Loading demo: button-transparent
Remember to add `leadingIcon` to include an icon before the label.
Loading demo: button-leading-icon
Renders a button with an icon and no text label.
Loading demo: button-icon-only
Use destructive={true} with any style (e.g. variant="primary" destructive). Matches Figma Destructive=True.
Loading demo: button-destructive
Props for the Button component.
Prop | Type | Default | Required |
|---|---|---|---|
variant | "neutral" | "primary" | "secondary-solid" | "secondary-outline" | "subtle" | "transparent" | "primary" | optional |
destructive | boolean | false | optional |
size | "sm" | "md" | "lg" | "md" | optional |
disabled | boolean | false | optional |
selected | boolean | false | optional |
iconOnly | boolean | false | optional |
leadingIcon | ReactNode | — | optional |
trailingIcon | ReactNode | — | optional |
fullWidth | boolean | false | optional |
as | ElementType | — | optional |
children | ReactNode | — | optional |