BankaiButton
A native <button> with typed variant, size, type, and disabled props. Ships no CSS of its own — the theme styles the bankai-button class and data-bankai-* state.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'solid' | 'outline' | 'ghost' | (string) | 'solid' | Visual variant. A named house variant (solid/outline/ghost) is themed; any other string reflects verbatim as data-bankai-variant as an escape hatch for a custom consumer-styled variant. |
size | 'sm' | 'md' | 'lg' | (string) | 'md' | Size scale. A named step (sm/md/lg) is themed; any other string reflects verbatim as data-bankai-size as an escape hatch for a custom consumer-styled size. |
type | 'submit' | 'reset' | 'button' | 'button' | Native button type. Defaults to 'button' rather than the HTML default 'submit', so the button never submits a surrounding form by accident. |
disabled | boolean | false | Disable the button via the native disabled attribute. |
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Button content — label and/or icons. |
Exposes
This component exposes nothing on its instance.
Theming
Every token is a :root custom property applied through zero-specificity :where() rules, so a single plain declaration overrides one — no selector, no !important. Set it globally on :root or locally on any ancestor.
| Token | Default | Purpose |
|---|---|---|
--bankai-button-fg | var(--bankai-color-primary-fg) | Text color of the solid variant. |
--bankai-button-bg | var(--bankai-color-primary) | Background fill of the solid variant. |
--bankai-button-bg-hover | color-mix(in oklch, var(--bankai-button-bg), black 12%) | Solid-variant background on hover. |
--bankai-button-bg-active | color-mix(in oklch, var(--bankai-button-bg), black 20%) | Solid-variant background while pressed. |
--bankai-button-bg-hover-quiet | color-mix(in oklch, currentcolor 8%, transparent) | Hover tint for the quiet (outline/ghost) variants. |
--bankai-button-bg-active-quiet | color-mix(in oklch, currentcolor 14%, transparent) | Pressed tint for the quiet (outline/ghost) variants. |
--bankai-button-border-width | 1px | Border width. |
--bankai-button-border-style | solid | Border style. |
--bankai-button-border-color | transparent | Border color (the solid variant shows none by default). |
--bankai-button-radius | var(--bankai-radius) | Corner radius. |
--bankai-button-display | inline-flex | Box display mode. |
--bankai-button-align | center | Cross-axis alignment of the icon/label row. |
--bankai-button-gap | var(--bankai-space-4) | Gap between the icon and the label. |
--bankai-button-font | inherit | Font shorthand (inherits the surrounding text by default). |
--bankai-button-cursor | pointer | Cursor over an enabled button. |
--bankai-button-transition | background-color 150ms ease, border-color 150ms ease, color 150ms ease | Transition applied to color changes. |
--bankai-button-focus-ring | var(--bankai-focus-ring) | Color of the focus-visible outline. |
--bankai-button-focus-outline-width | 2px | Width of the focus-visible outline. |
--bankai-button-focus-outline-offset | 2px | Offset of the focus-visible outline. |
--bankai-button-disabled-opacity | 0.5 | Opacity while disabled. |
--bankai-button-disabled-cursor | not-allowed | Cursor while disabled. |
--bankai-button-sm-padding-y | var(--bankai-space-1) | Vertical padding of the small size. |
--bankai-button-sm-padding-x | var(--bankai-space-4) | Horizontal padding of the small size. |
--bankai-button-sm-font-size | var(--bankai-text-size-sm) | Font size of the small size. |
--bankai-button-md-padding-y | var(--bankai-space-3) | Vertical padding of the medium size. |
--bankai-button-md-padding-x | var(--bankai-space-6) | Horizontal padding of the medium size. |
--bankai-button-md-font-size | var(--bankai-text-size-md) | Font size of the medium size. |
--bankai-button-lg-padding-y | var(--bankai-space-4) | Vertical padding of the large size. |
--bankai-button-lg-padding-x | var(--bankai-space-8) | Horizontal padding of the large size. |
--bankai-button-lg-font-size | var(--bankai-text-size-lg) | Font size of the large size. |