Button
Custom button styles for actions in forms, dialogs, and more — with contextual
variants, outline styles, sizes, and a polymorphic as prop.
Import
import { Button } from '@metatoy/bootstrap-styled';Variants
Use the variant prop for one of the eight Bootstrap contextual colors. These render
the library’s real Bootstrap palette — primary is Bootstrap blue #0d6efd, not
the site’s purple chrome.
Outline buttons
Prefix any color with outline- for a bordered, transparent-fill button.
Sizes, states & polymorphism
size="sm" | "lg" scales the button; disabled dims it; as="a" renders an anchor
while keeping button styling.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ButtonVariant | — | Bootstrap variant, e.g. "primary", "danger", "outline-primary". |
| size | "sm" | "lg" | — | — |
| as | React.ElementType | — | Render as a different element/component (e.g. an anchor or router Link). |
Buttons also accept all native <button> attributes (and anchor attributes such as
href, target, rel, download when rendered as="a").
Theming
Button reads the standard Bootstrap button tokens: --bs-btn-color,
--bs-btn-bg, --bs-btn-border-color, and their -hover / -active / -disabled
counterparts, derived from the active theme’s color for the chosen variant.
Accessibility
Rendered as a native <button type="button"> by default — focusable and keyboard
operable out of the box. When using as="a" for navigation, provide an href; for a
control that only fires JavaScript, prefer a real button so assistive tech announces it
correctly.
Explore in Ladle
Browse every button variant, size, and state in the interactive component gallery: Open in Ladle.