Button
Examples
Variants
Sizes
With icons
Icons carry a couple of pixels of blank space inside their viewBox, so equal padding on both sides makes the icon side read as roomier. Buttons pull each edge icon back by --icon-inset (2px) to even that out.
Icon buttons
Count badge
Icon buttons with a live count (chat, bag, bell) use NotchBadge: the badge floats over the top-end corner and a matching notch is masked out of the button, so the gap is see-through instead of painted (works over any background, a photo included). A single digit is a circle; past 9 it is one wide pill that grows outward from the same inner edge, with the notch following; the count caps at 99.
Disabled state
Border radius
Link mode
API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "primary" | "mono" | "destructive" | "destructive-dim" | "secondary" | "tertiary" | "outline" | "outline-active" | "dashed" | "ghost" | "shadow" | "link" | "dim" | "foreground" | "inverse" | "primary" | Visual style. |
| size | "xs" | "sm" | "default" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | "default" | Upstream's keys. Height, padding and icon scale: 24, 28, 40 and 48px, the same scale as Input and Select. xs and sm are shadcn's exact heights, the sizes ReUI's blocks use; default and lg are taller for touch. The icon-* sizes are the squares of the same heights, for icon-only buttons. |
| radius | "md" | "full" | "md" | Corner rounding. |
| mode | "default" | "icon" | "link" | "input" | "default" | Behavioral preset: icon-only sizing, inline link styling, or input-trigger styling (selects, date pickers). |
| selected | boolean | false | Renders the pressed/selected state. |
| type | "button" | "submit" | "reset" | "button" | Base UI's Button is not a submit button unless it says so: a form's submit button passes type="submit". |
| disabled | boolean | false | Disables the button. |
A link that looks like a button
Button is Base UI's Button, which gives whatever it renders role="button", so it never renders a link. A link that should look like a button is the link itself, wearing buttonVariants:
<Link className={buttonVariants({ variant: "outline" })} href="/sell">
Sell an item
</Link>