Actions
Button
The primary action control. Seven variants and four sizes, including the convex white fill that carries BTS's primary affordance.
Available
Ports as-is
Dual breakpoint
Examples
Rendered from the real component. Switch any preview to Mobile to see it at 430px in a genuine viewport.
Variants
Seven variants. `default` is the convex white fill; `tertiary` is a BTS addition not present in stock shadcn.
Sizes
Four sizes. Three of them change height below the md breakpoint.
With icons
Icons are sized and spaced by the base class — pass them as children in the order they should read.
States
Disabled drops pointer events and opacity. `asChild` renders any element as the button.
Across both breakpoints
Switch the preview to Mobile — this is the review both viewports exist for.
Props
The component's public API.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "tertiary" | "ghost" | "link" | "default" | Visual weight. `default` is the convex white fill that carries the primary action; `tertiary` is a BTS addition with a hairline border on a raised dark surface. |
size | "default" | "sm" | "lg" | "icon" | "default" | Control height and padding. All but `icon` grow to a 48px tap target below the md breakpoint. |
asChild | boolean | false | Renders the child element with the button's styles instead of a <button>. Use it for links so the element stays semantically correct. |
disabled | boolean | false | Drops pointer events and reduces opacity to 50%. |
className | string | — | Merged through `cn`, so a conflicting utility wins over the variant it overrides rather than fighting it. |
...props | React.ButtonHTMLAttributes<HTMLButtonElement> | — | Every native button attribute is forwarded, along with the ref. |
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/ui/button.tsx- Portability
- Copies across unchanged — only the utils import path moves.
- Variants
default (.btn-white)destructive (.btn-destructive)outlinesecondarytertiary (BTS addition)ghostlink- States to cover
hoveractivefocus ringdisabledleading/trailing iconicon-onlyasChild anchor- Dependencies
@radix-ui/react-slotclass-variance-authority- Responsive
- Carries a load-bearing
max-md:/md:pair. Sign off at both viewports — see the rule. - Notes
- Ported first: buttonVariants is consumed by AlertDialog, Calendar, Carousel and Pagination. Three of the four sizes grow to a 48px tap target below md.