BankaiText
A polymorphic text primitive. Pick the element with as (including inline semantics like code/kbd/mark) and style with size/weight/tone — each a named set plus a verbatim escape hatch.
Example
Heading (2xl / bold)Body text at the default weight.Muted small print.Subtle small print. Inline semantics: press ⌘K to highlight some
code. Props
| Prop | Type | Default | Description |
|---|---|---|---|
as | BankaiTextElement | string | 'span' | Element to render as. Polymorphic — suggests the phrasing/text elements (BankaiTextElement); any tag string (e.g. a custom element) is also accepted. Use an inline-semantic element ('strong', 'em', 'mark', 'code', 'kbd', 'del', …) to carry that meaning natively. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | string | — | Type size. A named xs–2xl step (--bankai-text-size-*) reflects as data-bankai-size; any other string is a verbatim CSS font-size. Omitted when unset (inherits the ambient font size). |
weight | 'thin' … 'black' | number | string | — | Font weight. A named step (BankaiTextWeight) reflects as data-bankai-weight; a number or any other string ('var(--wght)', 'calc(…)', 'lighter') is a verbatim font-weight — a variable font renders a numeric value along its wght axis. Omitted when unset (inherits the ambient weight). |
tone | 'default' | 'muted' | 'subtle' | string | — | Text tone. A named neutral tone reflects as data-bankai-tone; any other string is a verbatim CSS color. Omitted when unset (inherits the ambient color). |
truncate | boolean | false | Truncate overflowing text to a single line with an ellipsis. Reflected on the root as data-bankai-truncate. The theme rule makes the element block-level, so it truncates against the available width. |
Emits
This component emits no events.
Slots
| Slot | Description |
|---|---|
default | Text content. |
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-text-color | var(--bankai-color-fg) | Default text color. |
--bankai-text-color-muted | var(--bankai-color-fg-muted) | Color of the muted tone. |
--bankai-text-color-subtle | var(--bankai-color-fg-subtle) | Color of the subtle tone. |
--bankai-text-line-height-xs | 1rem | Line height paired with the xs size step. |
--bankai-text-line-height-sm | 1.25rem | Line height paired with the sm size step. |
--bankai-text-line-height-md | 1.5rem | Line height paired with the md size step. |
--bankai-text-line-height-lg | 1.75rem | Line height paired with the lg size step. |
--bankai-text-line-height-xl | 1.75rem | Line height paired with the xl size step. |
--bankai-text-line-height-2xl | 2rem | Line height paired with the 2xl size step. |