CSS Reference
Token names, default values, and modifier classes for every brio
component. Generated from CSS source; run brio cssref
to regenerate after changing component styles.
Alert
| Token | Default | Description |
|---|---|---|
--alert-bg | var(--color-surface-raised) | The background color for the alert |
--alert-header-font-size | var(--step-0) | The font-size for the alert header |
--alert-header-font-weight | var(--font-weight-bold) | Font weight for the alert header |
--alert-color | var(--color-text) | Text color for the alert body and header |
--alert-border | var(--color-border) | Border color for the alert container |
--alert-accent | var(--color-border-strong) | Accent color used for the icon and left-border emphasis |
--alert-padding-block | var(--ui-pad-y-snug) | Vertical padding inside the alert |
--alert-padding-inline | var(--ui-pad-x-snug) | Horizontal padding inside the alert |
--media-gap | var(--gap-snug) | Gap between the icon figure and body content |
| Slot | Description |
|---|---|
.media-figure | Icon slot, colored by the active accent |
| Class | Description |
|---|---|
.alert | component root |
.is-info | Info color variant for primary-tone alerts |
.is-success | Success color variant |
.is-warning | Warning color variant |
.is-danger | Danger color variant |
.is-compact | Tighter padding and gap for dense layouts |
Anchor
| Token | Default | Description |
|---|---|---|
--anchor-offset | -0.75em | Position offset for the overlay child |
| Class | Description |
|---|---|
.anchor | component root |
Avatar
| Token | Default | Description |
|---|---|---|
--avatar-size | 2.5rem | Diameter of the avatar disc |
--avatar-radius | var(--radius-pill) | Corner radius of the avatar |
--avatar-bg | var(--color-fill-strong) | Background color for the avatar disc |
--avatar-color | var(--color-text-muted) | Text and icon color inside the avatar |
--avatar-status-size | calc(var(--avatar-size) * 0.3) | Diameter of the status indicator dot |
--avatar-status-ring | var(--color-surface) | Ring color around the status dot for background separation |
| Class | Description |
|---|---|
.avatar | component root |
.is-sm | Small size variant (1.75rem) |
.is-lg | Large size variant (3.5rem) |
.is-xl | Extra-large size variant (5rem) |
.as-square | Square shape for entity or team avatars |
Avatar Group
| Token | Default | Description |
|---|---|---|
--avatar-group-offset | -0.75rem | Negative inline margin for avatar overlap |
--avatar-group-border | 2px solid var(--color-surface) | Border between overlapping avatars for visual separation |
| Class | Description |
|---|---|
.avatar-group | component root |
Avatar Status
| Class | Description |
|---|---|
.avatar-status | component root |
.is-online | Online status, colored with success |
.is-away | Away status, colored with warning |
.is-busy | Busy status, colored with danger |
.is-offline | Offline status, colored with subtle text |
Badge
| Token | Default | Description |
|---|---|---|
--badge-bg | var(--color-primary-subtle) | Background color for the badge |
--badge-color | var(--color-primary-text) | Text color for the badge |
--badge-border | var(--color-primary-border) | Border color for the badge |
--badge-radius | var(--radius-pill) | Border radius, defaults to pill shape |
--badge-padding | var(--ui-pad-y-dense) var(--ui-pad-x-compact) | Inner padding for the badge |
--dismiss-padding | var(--ui-pad-square-tight) | Padding override for an embedded dismiss button |
| Slot | Description |
|---|---|
.dismiss | Embedded dismiss button with tighter padding |
| Class | Description |
|---|---|
.badge | component root |
.is-neutral | Neutral color variant with muted text |
.is-accent | Accent color variant |
.is-danger | Danger color variant |
.is-success | Success color variant |
.is-warning | Warning color variant |
.as-square | Tag-style square corners instead of pill |
.as-circle | Circular shape for counts and step indicators |
Box
| Token | Default | Description |
|---|---|---|
--box-padding | var(--space-md | Inner padding for the box |
| Class | Description |
|---|---|
.box | component root |
.is-bordered | Adds background, border, and radius to the box |
Breadcrumb
| Token | Default | Description |
|---|---|---|
--breadcrumb-gap | var(--gap-tight) | Gap between crumb items and their separators |
--breadcrumb-font-size | var(--ui-text-sm) | Font size for breadcrumb text |
--breadcrumb-separator | "/" | Content string used as the visual separator between crumbs |
--breadcrumb-separator-color | var(--color-text-subtle) | Color of the separator character |
--breadcrumb-item-max-inline-size | none | Maximum width per crumb before text truncation engages |
| Class | Description |
|---|---|
.breadcrumb | component root |
.is-condensed | Collapses middle crumbs at narrow container widths |
Brio Media
| Token | Default | Description |
|---|---|---|
--brio-media-bg | var(--color-surface) | Background color for the host and controls bar |
--brio-media-border | var(--color-border-subtle) | Border color for the host container |
--brio-media-radius | var(--radius-md) | Corner radius for the host container |
--brio-media-controls-color | var(--color-text) | Icon and text color for transport controls |
--brio-media-controls-hover | color-mix(in oklch, currentColor 10%, transparent) | Hover background for transport buttons |
--brio-media-time-color | var(--color-text-muted) | Color for the time display |
--brio-media-track-h | 0.25rem | Height of the range track for timeline and volume |
--brio-media-track-bg | var(--color-fill) | Background color for the unfilled portion of range tracks |
--brio-media-track-fill | var(--color-primary) | Color for the filled portion of range tracks |
--brio-media-thumb-size | 0.875rem | Diameter of the range thumb |
--brio-media-thumb-bg | var(--color-primary) | Fill color for the range thumb |
| Class | Description |
|---|---|
brio-media | component root |
Brio Media Controls
| Token | Default | Description |
|---|---|---|
--brio-media-overlay-scrim | oklch(0% 0 0 / 0.85) | Scrim opacity at the bottom of the overlay gradient |
--brio-media-overlay-fade | opacity var(--duration-normal) var(--ease-in-out) | Show and hide opacity transition for overlay controls |
--brio-media-overlay-play-size | 2.5rem | Diameter of the enlarged play button in overlay mode |
| Slot | Description |
|---|---|
.brio-media-time | Elapsed and total duration display |
.brio-media-timeline | Timeline scrubber range input |
.brio-media-volume | Volume slider range input |
| Class | Description |
|---|---|
.brio-media-controls | component root |
Button
| Token | Default | Description |
|---|---|---|
--button-bg | var(--color-primary) | Background color for the button |
--button-color | var(--color-on-primary) | Text and icon color for the button |
--button-color-hover | var(--button-color) | Text color on hover, defaults to --button-color |
--button-border | transparent | Border color for the button |
--button-padding-block | var(--ui-pad-y-tight) | Vertical padding inside the button |
--button-padding-inline | var(--ui-pad-x-snug) | Horizontal padding inside the button |
--button-radius | var(--radius-md) | Border radius for the button |
--button-font-size | var(--ui-text-sm) | Font size for button text |
--button-font-weight | var(--font-weight-bold) | Font weight for button text |
--button-icon-size | var(--icon-size | Size of SVG icons inside the button |
| Slot | Description |
|---|---|
svg | Icons act as their own slot inside a button |
| Class | Description |
|---|---|
.button | component root |
.[aria-busy="true"] | Setting aria-busy=true will show the spinner indicator, and alter the cursor type. |
.is-accent | Accent color variant |
.is-danger | Danger color variant |
.is-neutral | Neutral fill for chrome and quiet actions |
.is-outlined | Transparent fill with tinted text and border |
.is-ghost | Transparent background with no border |
.is-bare | No visual chrome, just a clickable wrapper |
.is-sm | Smaller size with tighter padding |
.is-lg | Larger size with more padding |
.as-icon | Square padding for icon-only buttons |
.as-block | Full-width button |
Button Group
| Class | Description |
|---|---|
.button-group | component root |
Card
| Token | Default | Description |
|---|---|---|
--card-bg | var(--color-surface-raised) | Background color for the card |
--card-border | var(--color-border) | Border color for the card |
--card-radius | var(--radius-md) | Border radius for the card corners |
--card-padding-block | var(--ui-pad-y-relaxed) | Vertical padding inside the card |
--card-padding-inline | var(--ui-pad-x-relaxed) | Horizontal padding inside the card |
--card-shadow | var(--shadow-sm) | Box shadow for the card |
--card-gap | var(--gap-relaxed) | Vertical spacing between card regions |
--card-heading-size | var(--step-1) | Font size for the card heading |
--card-content-font-size | inherit | Font size for the card body content |
--card-media-radius | var(--radius-md) | Border radius for the first-child media figure |
--card-media-height | auto | Fixed height for the media image or video |
| Slot | Description |
|---|---|
> figure:first-child | Full-bleed slot when figure is the first child |
> footer | The footer slot is pushed to the bottom edge |
| Class | Description |
|---|---|
.card | component root |
.is-compact | Tighter padding, gap, and smaller heading |
.is-flat | No shadow, border, or background |
.is-interactive | Hover shadow and stretched heading link for whole-card click |
.is-featured | Primary-colored thick border for emphasis |
Card Grid
| Token | Default | Description |
|---|---|---|
--card-grid-min | 18rem), 1fr | Minimum column width for auto-fill columns |
--card-grid-rows | 4 | Number of subgrid rows each card spans |
| Class | Description |
|---|---|
.card-grid | component root |
.card-grid.is-aligned | Subgrid row alignment across uniform cards |
Center
| Token | Default | Description |
|---|---|---|
--center-max | 65rem | Maximum content width |
--center-gutter | var(--ui-pad-x-relaxed | Inline padding that narrows the content area |
| Class | Description |
|---|---|
.center | component root |
Clamp Text
| Token | Default | Description |
|---|---|---|
--clamp-lines | 3 | Number of lines to display when clamped |
--clamp-fade-height | calc(0.5em * var(--clamp-lines)) | Height of the fade gradient at the bottom |
--clamp-fade-color | var(--color-surface, oklch(100% 0 0)) | Color of the fade gradient -- matches background by default |
| Class | Description |
|---|---|
.clamp-text | component root |
.is-1-line | Clamp to 1 line |
.is-2-lines | Clamp to 2 lines |
.is-3-lines | Clamp to 3 lines (default) |
.is-4-lines | Clamp to 4 lines |
.is-5-lines | Clamp to 5 lines |
.is-responsive | Responsive clamping -- no default, meant to be customized |
Cluster
| Token | Default | Description |
|---|---|---|
--cluster-wrap | wrap | Flex wrap behavior for the cluster |
--cluster-align | center | Cross-axis alignment for cluster items |
--cluster-gap | var(--gap-snug) | Gap between cluster items |
| Class | Description |
|---|---|
.cluster | component root |
.is-snug | Tighter gap between cluster items |
.is-tight | Tightest gap between cluster items |
.is-between | Space-between distribution with flex grow |
.is-around | Space-evenly distribution with flex grow |
.is-center | Center-justified cluster items |
.is-end | End-justified cluster items |
Code
| Token | Default | Description |
|---|---|---|
--code-bg | var(--color-fill) | Background color for the code block |
--code-border | var(--color-border-subtle) | Border color for the code block |
--code-radius | var(--radius-md) | Border radius for the code block |
--code-padding | var(--space-md) | Inner padding for the code block |
--code-font-size | var(--step--1) | Font size for code text |
| Class | Description |
|---|---|
.code | component root |
Code Header
| Token | Default | Description |
|---|---|---|
--code-header-bg | var(--color-surface) | Background color for the header bar |
--code-header-border | var(--color-border-subtle) | Border color for the header bar |
--code-header-radius | var(--radius-md) | Border radius for the header bar |
--code-header-font-size | var(--ui-text-xs) | Font size for the header label |
| Class | Description |
|---|---|
.code-header | component root |
.is-accent | Primary-tinted header background and border |
.is-filled | Subtle fill that blends with the code block |
Cover
| Token | Default | Description |
|---|---|---|
--cover-min-height | 100vh | Minimum height for the cover container |
--cover-padding | var(--space-md | Inner padding for the cover container |
| Class | Description |
|---|---|
.cover | component root |
Details
| Token | Default | Description |
|---|---|---|
--details-border | var(--border-width-default) solid var(--color-border) | Border shorthand for the details container |
--details-padding | var(--ui-pad-y-snug) var(--ui-pad-x-snug) | Inner padding for the details container |
--details-chevron-size | 0.5em | Size of the chevron indicator |
--details-chevron-color | var(--color-text-muted) | Color of the chevron indicator |
| Class | Description |
|---|---|
.details | component root |
.no-border | Removes the border entirely |
.is-flush | No border with bottom-only rule, for use inside containers |
.is-filled | Subtle fill when closed, raised surface when open |
.is-info | Info callout color variant |
.is-warning | Warning callout color variant |
.is-danger | Danger callout color variant |
.is-success | Success callout color variant |
Dialog
| Token | Default | Description |
|---|---|---|
--dialog-bg | var(--color-surface-float) | Background color for the dialog surface |
--dialog-color | var(--color-text) | Text color inside the dialog |
--dialog-max-width | 32rem | Maximum width of the dialog |
--dialog-padding-x | var(--ui-pad-x-relaxed) | Horizontal padding for header, body, and footer slots |
--dialog-padding-y | var(--ui-pad-y-relaxed) | Vertical padding for the body slot |
--dialog-radius | var(--radius-md) | Border radius for the dialog |
--dialog-border | var(--border-width-default) solid var(--color-border) | Outer border for the dialog |
--dialog-header-border | var(--border-width-default) solid var(--color-border) | Separator border below the header |
--dialog-footer-border | var(--border-width-default) solid var(--color-border) | Separator border above the footer |
--dialog-title-size | var(--ui-text-base) | Font size for the dialog title heading |
--dismiss-hover-bg | var(--color-fill-on-float) | Hover background for the dismiss button inside the dialog |
| Slot | Description |
|---|---|
.dismiss | Dismiss button with hover tuned for the float surface |
> header, | A header slot starts with a <header> element |
> :is(section, article), | Body slots start with <section> or <article> elements |
> footer, | Footer slots start with a <footer> element |
| Class | Description |
|---|---|
.dialog | component root |
.is-sm | Narrow dialog at 24rem max width |
.is-lg | Wide dialog at 48rem max width |
.is-full | Near-viewport-width dialog with scrollable body |
.no-border | Strips all borders from the dialog and its slots |
.is-danger | Danger-tinted dialog for destructive actions |
Dismiss
| Token | Default | Description |
|---|---|---|
--dismiss-color | var(--color-text-muted) | Icon color at rest |
--dismiss-hover-color | var(--color-text) | Icon color on hover |
--dismiss-hover-bg | var(--color-shadow) | Background color on hover |
--dismiss-padding | var(--ui-pad-square-snug) | Inner padding around the icon |
--dismiss-size | 1em | Explicit height and width of the button |
| Class | Description |
|---|---|
.dismiss | component root |
Divider
| Token | Default | Description |
|---|---|---|
--divider-color | var(--color-border) | Line color for the divider |
--divider-spacing | var(--space-md) | Margin spacing around the divider |
--divider-label-gap | var(--gap-relaxed) | Gap between the label text and the lines |
--divider-font-size | var(--ui-text-sm) | Font size for the label text |
| Class | Description |
|---|---|
.divider | component root |
.as-vertical | Vertical orientation for use inside flex rows |
Drawer
| Token | Default | Description |
|---|---|---|
--drawer-width | 18rem | Width of the drawer panel |
--drawer-bg | var(--color-surface) | Background color for the panel |
--drawer-border | var(--border-width-default) solid var(--color-border) | Outer border for the panel edge facing the page |
--drawer-header-border | var(--border-width-default) solid var(--color-border) | Separator border below the header |
--drawer-footer-border | var(--border-width-default) solid var(--color-border) | Separator border above the footer |
--drawer-text-color | var(--color-text) | Text color inside the panel |
--drawer-radius | var(--radius-sm) | Border radius on the panel's page-facing corners |
--drawer-title-size | var(--ui-text-base) | Font size for the drawer title heading |
| Slot | Description |
|---|---|
.drawer-panel | Visible sliding container pinned to one edge |
.drawer-panel > header | Title row with bordered separator |
.drawer-panel > :is(section, article) | scrollable middle, grows to fill the panel column |
.drawer-panel > footer | right-aligned action row, pinned to the bottom |
| Class | Description |
|---|---|
.drawer | component root |
.is-closing | Animated close state applied by brio-drawer before dialog.close() |
.is-end | Slides from the end (right in LTR) instead of the start |
.no-border | Strips all borders from the drawer and its slots |
.is-sm | Narrow drawer at 14rem |
.is-lg | Wide drawer at 24rem |
.is-xl | Extra-wide drawer at 32rem |
Dropdown
| Token | Default | Description |
|---|---|---|
--dropdown-min-width | 10rem | Minimum width of the menu panel |
--dropdown-padding | var(--ui-pad-square-tight) | Inner padding for the menu panel |
--dropdown-divider-border | var(--border-width-default) solid var(--color-border) | Border for separator rules between groups |
--popover-padding-x | var(--dropdown-padding) | Horizontal padding override for the popover surface |
--popover-padding-y | var(--dropdown-padding) | Vertical padding override for the popover surface |
--popover-max-width | none | Max-width override, uncapped for menus |
--dropdown-item-padding-x | var(--ui-pad-x-tight) | Horizontal padding for menu items |
--dropdown-item-padding-y | var(--ui-pad-y-compact) | Vertical padding for menu items |
--dropdown-item-color | var(--color-text) | Text color for menu items |
--dropdown-item-bg-hover | var(--color-fill-on-float) | Background color on item hover |
--dropdown-item-bg-current | var(--color-state-bg-on-float) | Background color for the current selection |
--dropdown-item-border-hover | var(--color-fill-on-float) | Focus outline color on item hover |
--dropdown-item-radius | var(--radius-md) | Border radius for menu items |
| Slot | Description |
|---|---|
.dropdown-item | Clickable menu row, also matched by [role="menuitem"] |
.dropdown-label | Group header inside the menu |
.dropdown :is(hr, [role="separator"]) | hr or any element with role="separator" acts as a menu separator |
| Class | Description |
|---|---|
.dropdown | component root |
.is-end | End-aligned placement for triggers near the inline-end edge |
.is-danger | Destructive action with danger coloring |
Dropzone
src/css/extras/brio-dropzone.css
| Token | Default | Description |
|---|---|---|
--dropzone-border-color | var(--color-border-strong) | Border color for the dropzone container |
--dropzone-border-style | dashed | Border style, dashed by default to signal a drop target |
--dropzone-border-width | 2px | Border width for the dropzone container |
--dropzone-bg | var(--color-surface) | Background color for the dropzone surface |
--dropzone-color | var(--color-text-muted) | Text color for the dropzone prompt |
--dropzone-icon-color | var(--color-text-subtle) | Color for SVG icons inside the dropzone |
--dropzone-radius | var(--radius-md) | Corner radius for the dropzone |
--dropzone-padding-x | var(--ui-pad-x-spacious) | Horizontal padding inside the dropzone |
--dropzone-padding-y | var(--ui-pad-y-spacious) | Vertical padding inside the dropzone |
--dropzone-gap | var(--gap-snug) | Gap between stacked children inside the dropzone |
--dropzone-font-size | var(--ui-text-sm) | Font size for the prompt and hint text |
--dropzone-transition | border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out) | Transition shorthand for state color changes |
| Class | Description |
|---|---|
.dropzone | component root |
.is-dragover | Active drag state when a file is over the dropzone |
.is-accepted | Files validated and adopted successfully |
.is-rejected | Files rejected by the accept-pattern check |
Flank
| Token | Default | Description |
|---|---|---|
--flank-gap | var(--space-lg | Gap between the secondary and main columns |
--flank-width | 20rem | Flex basis for the secondary column |
--flank-content-min | 50% | Minimum width before wrapping to single column |
| Class | Description |
|---|---|
.flank | component root |
.is-reversed | Main content first, secondary second |
Flow
| Token | Default | Description |
|---|---|---|
--flow-space | var(--gap-spacious | Vertical spacing between flow children |
| Class | Description |
|---|---|
.flow | component root |
Frame
| Token | Default | Description |
|---|---|---|
--frame-ratio | 16 / 9 | Aspect ratio for the frame |
--frame-align | center | Vertical alignment of frame content |
--frame-justify | center | Horizontal alignment of frame content |
| Class | Description |
|---|---|
.frame | component root |
Grid
| Token | Default | Description |
|---|---|---|
--grid-min | 16rem), 1fr | Minimum column width for auto-fill columns |
--grid-gap | var(--gap-spacious | Gap between grid cells |
| Class | Description |
|---|---|
.grid | component root |
Icon Box
| Token | Default | Description |
|---|---|---|
--icon-box-size | 2.5rem | Width and height of the box |
--icon-box-bg | var(--color-surface-raised) | Background color of the box |
--icon-box-color | var(--color-text) | Icon color inside the box |
--icon-box-radius | var(--radius-md) | Border radius of the box |
| Class | Description |
|---|---|
.icon-box | component root |
.is-sm | Smaller box at 2rem |
.is-lg | Larger box at 3rem |
.is-primary | Primary color variant |
.is-success | Success color variant |
.is-warning | Warning color variant |
.is-danger | Danger color variant |
.is-accent | Accent color variant |
Input
| Token | Default | Description |
|---|---|---|
--input-border | var(--color-border-stronger) | Border color shared across the input family |
--input-radius | var(--radius-md) | Border radius shared across the input family |
--input-bg | var(--color-surface) | Background color shared across the input family |
--input-focus-color | var(--color-focus) | Focus ring color shared across the input family |
--input-transition | var(--transition-fast) | Transition speed shared across the input family |
--input-height | 2.25rem | Block height for text inputs and select |
--input-padding | var(--ui-pad-y-compact) var(--ui-pad-x-tight) | Inner padding for text inputs and select |
--input-font-size | var(--ui-text-sm) | Font size for text inputs and select |
--input-line-height | var(--leading-tight) | Line height for text inputs and select |
--input-chevron-color | var(--color-text-muted) | Color of the select dropdown chevron |
--input-check-size | var(--ui-text-base) | Size of the checkbox or radio control |
--input-check-accent | var(--color-primary) | Accent color when checked |
--input-check-color | var(--color-on-primary) | Tick or dot color when checked |
--input-switch-track-width | 2.25rem | Width of the switch track |
--input-switch-track-height | 1.25rem | Height of the switch track |
--input-switch-thumb-offset | 2px | Inset offset for the thumb from the track edge |
--input-switch-thumb-size | calc(var(--input-switch-track-height) - var(--input-switch-thumb-offset) * 2) | Computed size of the switch thumb |
--input-switch-track-off | var(--color-border-stronger) | Track color in the off state |
--input-switch-track-on | var(--input-check-accent) | Track color in the on state |
--input-switch-thumb | var(--color-surface-float) | Thumb color |
--input-range-track-h | 0.375rem | Height of the range track |
--input-range-track-bg | var(--color-fill) | Background color of the range track |
--input-range-track-radius | var(--radius-pill) | Border radius of the range track |
--input-range-thumb-size | 1.125rem | Size of the range thumb |
--input-range-thumb-bg | var(--color-primary) | Background color of the range thumb |
| Class | Description |
|---|---|
.input | component root |
.is-sm | Smaller text input with tighter padding |
.is-lg | Larger text input with more padding |
Input Group
| Slot | Description |
|---|---|
.input-addon | Label, icon, or unit addon inside an input group |
| Class | Description |
|---|---|
.input-group | component root |
.is-joined | Classic shaded-endcap look with per-child borders |
Media
| Token | Default | Description |
|---|---|---|
--media-align | flex-start | Cross-axis alignment for media children |
--media-gap | var(--gap-relaxed | Gap between figure and text |
| Class | Description |
|---|---|
.media | component root |
Media Figure
| Token | Default | Description |
|---|---|---|
--media-figure-start | 0.1rem | Block-start margin to nudge the figure vertically |
| Class | Description |
|---|---|
.media-figure | component root |
Nav Link
| Token | Default | Description |
|---|---|---|
--nav-link-padding-y | var(--ui-pad-y-compact) | Vertical padding |
--nav-link-padding-x | var(--ui-pad-x-tight) | Horizontal padding |
--nav-link-font-size | var(--ui-text-sm) | Font size for the link |
--nav-link-color | var(--color-text) | Text color at rest |
--nav-link-color-active | var(--color-primary) | Text color on hover and for the current page |
| Class | Description |
|---|---|
.nav-link | component root |
Navbar
| Token | Default | Description |
|---|---|---|
--navbar-bg | var(--color-surface) | Background color for the navbar |
--navbar-border | var(--border-width-default) solid var(--color-border-subtle) | Bottom border for the navbar |
--navbar-padding | var(--ui-pad-y-snug) var(--ui-pad-x-snug) | Inner padding for the navbar |
| Class | Description |
|---|---|
.navbar | component root |
.no-border | Removes the bottom border |
Pagination
| Token | Default | Description |
|---|---|---|
--pagination-gap | var(--gap-tight) | Gap between page number items |
--pagination-item-size | 2.25rem | Minimum inline and block size for each page item |
--pagination-radius | var(--radius-sm) | Corner radius for page items and directional links |
--pagination-font-size | var(--ui-text-sm) | Font size for page numbers and labels |
--pagination-item-bg-hover | var(--color-fill) | Hover background for inactive page items |
--pagination-item-active-bg | var(--color-state-bg) | Background color for the current page indicator |
--pagination-item-active-color | var(--color-primary) | Text color for the current page indicator |
| Slot | Description |
|---|---|
.pagination-list | Ordered list of page number items |
.pagination-item | Individual page number link or placeholder |
.pagination-prev, .pagination-next | Directional navigation link for previous or next page |
| Class | Description |
|---|---|
.pagination | component root |
.is-ellipsis | Non-interactive ellipsis placeholder between page ranges |
.is-disabled | Disabled state for directional links at list boundaries |
.is-compact | Denser pagination with smaller items and tighter gap |
.is-condensed | Collapses prev/next text labels at narrow container widths |
Popover
| Token | Default | Description |
|---|---|---|
--popover-bg | var(--color-surface-float) | Background color for the popover surface |
--popover-color | var(--color-text) | Text color inside the popover |
--popover-border | var(--border-width-default) solid var(--color-border) | Border for the popover surface |
--popover-radius | var(--radius-md) | Border radius for the popover |
--popover-padding-x | var(--ui-pad-x-snug) | Horizontal padding inside the popover |
--popover-padding-y | var(--ui-pad-y-snug) | Vertical padding inside the popover |
--popover-shadow | var(--shadow-lg) | Box shadow for the popover |
--popover-max-width | 20rem | Maximum width of the popover |
--popover-offset | var(--space-3xs) | Gap between the trigger and the popover edge |
| Slot | Description |
|---|---|
> header:first-child | Header slot -- full-bleed bordered separator (P2 test 2: extends through parent's --popover-padding-x via negative inline margins). Keyed to first-child so a <header> dropped mid-popover stays at UA defaults instead of breaking layout. |
| Class | Description |
|---|---|
.popover | component root |
.is-top | Anchored above the trigger |
.is-start | Anchored to the inline-start side of the trigger |
.is-end | Anchored to the inline-end side of the trigger |
.is-sm | Narrow popover at 14rem max width |
.is-lg | Wide popover at 32rem max width |
.is-wide | Uncapped width |
.no-border | Removes the border |
Progress
| Token | Default | Description |
|---|---|---|
--progress-height | 0.5rem | Track height of the progress bar |
--progress-radius | var(--radius-pill) | Corner radius for the bar track and fill |
--progress-bg | var(--color-fill) | Background color of the unfilled track |
--progress-fill | var(--color-primary-soft) | Fill color for the completed portion |
--progress-label-color | var(--color-text) | Text color for inline percentage labels |
--progress-transition | var(--transition-normal) | Transition for animated width changes on the fill |
| Slot | Description |
|---|---|
.progress-bar | Filled portion of the bar |
| Class | Description |
|---|---|
.progress | component root |
.is-sm | Smaller thickness for the progress bar |
.is-lg | Larger thickness for the progress bar |
.progress-bar.is-success | Success color variant for the internal progress-bar |
.progress-bar.is-warning | Warning color variant for the internal progress-bar |
.progress-bar.is-danger | Danger color variant for the internal progress-bar |
.is-stacked | Stacked segments, bars flush edge-to-edge inside one track. The first / last segments keep the track's outer radius; middle segments are square so the seams meet flat. |
.is-indeterminate | An indeterminate bar slides across the track on a loop. Container becomes positioning context; the .progress-bar inside is absolutely positioned so the keyframe animates its own position and size without nudging the surrounding layout. |
Progress Ring
| Token | Default | Description |
|---|---|---|
--progress-ring-size | 5rem | Outer diameter of the ring |
--progress-ring-width | 0.375rem | Thickness of the ring stroke |
--progress-fill | var(--color-primary-soft) | Fill color for the ring arc |
--progress-bg | var(--color-fill) | Background color for the unfilled portion of the ring |
--progress-ring-cutout-bg | var(--color-surface) | Background color of the inner cutout |
--progress-value | 0 | Consumer-set progress value, 0 to 100 |
| Class | Description |
|---|---|
.progress-ring | component root |
.is-success | Success color variant for the ring fill |
.is-warning | Warning color variant for the ring fill |
.is-danger | Danger color variant for the ring fill |
.is-sm | Small ring variant (3rem diameter) |
.is-lg | Large ring variant (8rem diameter) |
Prose
| Token | Default | Description |
|---|---|---|
--prose-spacing | var(--space-sm-md) | Vertical rhythm between direct children |
--prose-max-width | 65ch | Maximum inline size for readable line length |
--prose-border | var(--border-width-default) solid var(--color-border) | Separator border for rules, table rows, and details |
--prose-blockquote-border | 3px solid var(--color-border-strong) | Inline-start accent border for blockquotes |
--prose-kbd-border | var(--border-width-default) solid var(--color-border-strong) | Border for keyboard input elements |
--prose-figcaption-align | start | Text alignment for figure captions |
--prose-mark-bg | var(--color-warning-subtle | Background color for highlighted text |
| Class | Description |
|---|---|
.prose | component root |
.is-wide | Removes the max-width limit for full-width layouts |
Rating
| Token | Default | Description |
|---|---|---|
--rating-size | 1.5rem | Inline and block size of each star |
--rating-icon | url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.56 5.82 22 7 14.14l-5-4.87 6.91-1.01z'/%3E%3C/svg%3E") | Mask image for the star shape, swappable to any single-path SVG |
--rating-color | var(--color-border) | Color of unselected stars |
--rating-active | var(--color-warning) | Color of selected and hovered stars |
--rating-gap | var(--gap-compact) | Gap between stars |
| Class | Description |
|---|---|
.rating | component root |
.is-readonly | Display-only mode using span elements instead of radio inputs |
.is-sm | Small size variant (1rem stars) |
.is-lg | Large size variant (2rem stars) |
Reel
| Token | Default | Description |
|---|---|---|
--reel-gap | var(--gap-spacious | Gap between reel items |
--reel-scrollbar | thin | Scrollbar display style for the reel |
--reel-item-shrink | 0 | Whether reel items can shrink below their basis |
--reel-item-size | auto | Flex basis for reel items |
| Class | Description |
|---|---|
.reel | component root |
Sidebar
| Token | Default | Description |
|---|---|---|
--sidebar-width | 16rem | Width of the sidebar panel |
--sidebar-bg | var(--color-surface) | Background color for the sidebar |
--sidebar-border | var(--border-width-default) solid var(--color-border-subtle) | Inline-end border of the panel |
--sidebar-link-font-size | var(--ui-text-sm) | Font size for sidebar-link rows inside the panel |
--sidebar-header-border | var(--border-width-default) solid var(--color-border-subtle) | Bottom border for the header region |
--sidebar-footer-border | var(--border-width-default) solid var(--color-border-subtle) | Top border for the footer region |
| Slot | Description |
|---|---|
> header | The header section at the top of a sidebar |
> footer | The footer secton at the bottom of a sidebar |
.sidebar-toggle | Mobile toggle -- hidden on desktop, revealed below 64rem in place of the hidden sidebar. Styled like a minimal button; consumers wire the open action with commandfor targeting a <brio-drawer> by ID. |
| Class | Description |
|---|---|
.sidebar | component root |
.no-border | Removes the inline-end border |
Sidebar Link
| Token | Default | Description |
|---|---|---|
--sidebar-link-font-size | var(--ui-text-sm | Font size for sidebar links, set on .sidebar |
--sidebar-icon-size | var(--icon-size | Icon dimensions for the leading slot |
| Slot | Description |
|---|---|
.sidebar-link-icon | Leading icon slot |
.sidebar-link-meta | Trailing slot for counts, hints, or badges |
| Class | Description |
|---|---|
.sidebar-link | component root |
Sidebar Nav
| Token | Default | Description |
|---|---|---|
--sidebar-nav-group-font-size | var(--ui-text-xs) | Font size for group labels |
--sidebar-edge-pad | var(--ui-pad-x-compact) | Inline-start padding for labels and top-level links |
--sidebar-rail-width | 1px | Thickness of the group rail |
--sidebar-rail-color | color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 12%) | Rail resting color, derived from --sidebar-bg |
--sidebar-rail-color-active | color-mix(in oklch, var(--sidebar-bg), var(--color-shift) 28%) | Rail color when the group contains the current link |
--sidebar-rail-marker-color | var(--color-primary) | Color of the current-row segment marker |
--sidebar-group-indent | var(--ui-pad-x-snug) | Inline indent applied alongside the rail |
| Slot | Description |
|---|---|
.sidebar-group | Section group, either static div or collapsible details |
.sidebar-group-content | Disclosed-content wrapper with inline-start rail |
.sidebar-group-label | Section header label or collapsible summary |
| Class | Description |
|---|---|
.sidebar-nav | component root |
.sidebar-group.no-border | Per-group opt-out of the rail (and therefore the marker too, since the marker has nothing to overlap without the rail). |
Skeleton
| Token | Default | Description |
|---|---|---|
--skeleton-color | var(--color-fill-strong) | Base fill tint for the skeleton block |
--skeleton-highlight | var(--color-fill) | Shimmer band tint for the animated sweep |
--skeleton-radius | var(--radius-sm) | Corner radius for the skeleton block |
| Class | Description |
|---|---|
.skeleton | component root |
.is-circle | Circle placeholder for avatar or icon stand-ins |
Spinner
| Token | Default | Description |
|---|---|---|
--spinner-size | 1.25em | Diameter of the spinner |
--spinner-width | 2px | Border thickness of the spinner ring |
--spinner-color | currentColor | Color of the spinning arc |
--spinner-track | var(--color-shadow) | Color of the background track |
--spinner-speed | 0.6s | Duration of one full rotation |
| Class | Description |
|---|---|
.spinner | component root |
.is-sm | Smaller spinner at 1em |
.is-lg | Larger spinner at 2rem with thicker ring |
.is-xl | Extra-large spinner at 3rem with thicker ring |
.is-primary | Primary color arc |
.is-accent | Accent color arc |
Stack
| Token | Default | Description |
|---|---|---|
--stack-gap | var(--gap-snug) | Gap between stack children |
| Class | Description |
|---|---|
.stack | component root |
.is-snug | Tighter gap between stack children |
.is-tight | Tightest gap between stack children |
.is-centered | Cross-axis centering for stack items |
Stacked List
| Token | Default | Description |
|---|---|---|
--stacked-list-padding-block | var(--ui-pad-y-snug) | Row vertical padding |
--stacked-list-padding-inline | var(--ui-pad-x-snug) | Row horizontal padding |
--stacked-list-gap | var(--gap-snug) | Gap between leading, content, and trailing regions |
--stacked-list-radius | var(--radius-sm) | Row corner radius, visible on hover |
--stacked-list-content-gap | var(--space-3xs) | Gap between heading and description in the content region |
--stacked-list-divider-color | var(--color-border-subtle) | Border color between rows when .is-divided is active |
--stacked-list-leading-align | flex-start | Vertical alignment of the leading slot |
--stacked-list-trailing-align | flex-start | Vertical alignment of the trailing slot |
--stacked-list-header-font-size | var(--step-0) | Heading font size |
--stacked-list-content-font-size | var(--step--1) | Description and paragraph font size |
--stacked-list-chevron-size | 0.5em | Size of the revealable-row chevron |
--stacked-list-chevron-color | var(--color-text-muted) | Color of the revealable-row chevron |
| Slot | Description |
|---|---|
> :is(.leading, aside:has(~ div)) | Leading slot -- .leading, or a legacy <aside> that has a content <div> after it. Aligns to flex-start by default; tokenized so consumers can center an avatar in tightly-packed rows, etc. |
> :is(.trailing, div ~ aside) | Trailing slot -- .trailing, or a legacy <aside> after a content <div>. Same flex-start default, independent token. |
> div:not(.leading, .trailing) | Content region -- bare <div> between the slots. Itself a flex column so heading and description stack with a small gap without consumers needing to wrap them in .flow. |
:is(h2, h3, h4, h5, h6) | Header region |
| Class | Description |
|---|---|
.stacked-list | component root |
.is-divided | Adds 1px border between sibling rows |
.is-compact | Denser padding and tighter gap |
.is-interactive | Hover highlight and stretched heading link for whole-row click |
Stat
| Token | Default | Description |
|---|---|---|
--stat-gap | var(--gap-tight) | Gap between the label, value, and description slots |
--stat-label-size | var(--step--1) | Font size for the metric label |
--stat-value-size | var(--step-3) | Font size for the big number |
--stat-description-size | var(--step--1) | Font size for the supplementary description |
--stat-label-color | var(--color-text-muted) | Text color for the label |
--stat-value-color | var(--color-text) | Text color for the value |
| Slot | Description |
|---|---|
& .stat-label | Label text identifying the metric |
& .stat-value | Large number or formatted value |
& .stat-description | Supplementary text or trend indicator |
| Class | Description |
|---|---|
.stat | component root |
.is-compact | Tighter layout with smaller value for dense dashboard cards |
Stepper
| Token | Default | Description |
|---|---|---|
--stepper-gap | var(--gap-snug) | Gap between the badge and label inside each step |
--stepper-connector-min | var(--space-lg) | Minimum inline size of the divider connector between steps |
--cluster-wrap | nowrap | Flex-wrap override for the cluster composition |
| Slot | Description |
|---|---|
.stepper .step | Step pair containing a badge and optional label |
.stepper-connector | Divider connector line between steps |
| Class | Description |
|---|---|
.stepper | component root |
.is-compact | Always hides labels, showing badges only at every width |
.is-condensed | Auto-hides labels at narrow container widths via container query |
Subnavbar
| Token | Default | Description |
|---|---|---|
--subnavbar-bg | var(--color-surface) | Background color for the subnavbar |
--subnavbar-border | var(--border-width-default) solid var(--color-border-subtle) | Bottom border for the subnavbar |
--subnavbar-padding | var(--ui-pad-y-compact) var(--ui-pad-x-snug) | Inner padding for the subnavbar |
--navbar-height | 4rem | Sticky offset from the top, set on navbar or :root |
| Class | Description |
|---|---|
.subnavbar | component root |
.no-border | Removes the bottom border |
Switcher
| Token | Default | Description |
|---|---|---|
--switcher-wrap | wrap | Flex wrap behavior for the switcher |
--switcher-align | center | Cross-axis alignment for switcher items |
--switcher-gap | var(--gap-spacious | Gap between switcher items |
--switcher-threshold | 30rem) - 100%) * 999 | Container width at which items switch to column |
| Class | Description |
|---|---|
.switcher | component root |
Table
| Token | Default | Description |
|---|---|---|
--table-padding | var(--ui-pad-y-tight) var(--ui-pad-x-tight) | Cell padding for th and td |
--table-border-color | var(--color-border) | Border color for cell dividers |
--table-header-bg | transparent | Background color for the header row |
--table-header-color | var(--color-text) | Text color for header cells |
--table-stripe-bg | var(--color-fill-subtle) | Background color for striped and hovered rows |
| Class | Description |
|---|---|
.table | component root |
.is-striped | Alternating row background on even rows |
.is-bordered | Borders on all cells and the table edge |
.is-compact | Denser padding and smaller font size |
.is-hoverable | Highlight rows on hover |
Table Wrap
| Token | Default | Description |
|---|---|---|
--table-wrap-border | var(--border-width-default) solid var(--color-border) | Border for the outer table-wrap when .is-bordered is used |
| Class | Description |
|---|---|
.table-wrap | component root |
.is-bordered | Show the border for the table wrap |
Tabs
| Token | Default | Description |
|---|---|---|
--tab-font-size | var(--ui-text-sm) | Font size for tab triggers |
--tab-padding-x | var(--ui-pad-x-compact) | Horizontal padding for tab triggers |
--tab-padding-y | var(--ui-pad-y-tight) | Vertical padding for tab triggers |
--tab-gap | var(--gap-tight) | Gap between tab triggers |
--tab-color | var(--color-text-muted) | Text color for inactive tabs |
--tab-color-active | var(--color-primary) | Text color for the active tab |
--tab-border-color | var(--color-border) | Border color for the tablist underline |
--tab-active-border-color | var(--color-primary) | Border color for the active tab indicator |
--tab-panel-padding-block | var(--space-md) | Vertical padding for tab panels |
| Slot | Description |
|---|---|
.tabs [role="tablist"] | Tablist -- styled via the role since it's a structural container, * not a separately-named slot. Inset shadow is a deliberate choice: * the active tab's bottom-border indicator overlays cleanly without * a negative margin, which would get clipped by overflow-x scrolling. |
.tabs :is([role="tab"], .tab) | Tab -- both .tab class and [role="tab"] are styling hooks. Same * dual-pairing pattern as .dropdown-item + [role="menuitem"]. |
| Class | Description |
|---|---|
.tabs | component root |
.as-vertical | Side-tab orientation with column tablist |
.as-stretched | Tabs grow equally to fill the tablist width |
.as-pills | Pill-shaped triggers with filled active state |
Timeline
| Token | Default | Description |
|---|---|---|
--timeline-gap | var(--space-md) | Horizontal gap between the marker column and content column |
--timeline-line-color | var(--color-border) | Color of the connecting line between events |
--timeline-dot-size | 0.625rem | Diameter of the event indicator dot |
--timeline-dot-color | var(--color-primary) | Fill color for the event indicator dot |
| Slot | Description |
|---|---|
.timeline-marker | Marker column holding the dot or avatar and connecting line |
.timeline-marker .timeline-dot | Colored event indicator dot inside timeline-marker |
.timeline-marker .timeline-line | Connecting line between event markers inside timeline-marker |
.timeline-content | Content column for the event description |
| Class | Description |
|---|---|
.timeline | component root |
.is-dashed | Dashed line pattern for pending or future events |
.is-success | Success color variant for the dot |
.is-warning | Warning color variant for the dot |
.is-danger | Danger color variant for the dot |
.is-accent | Accent color variant for the dot |
.is-neutral | Neutral color variant for the dot |
Toast
| Token | Default | Description |
|---|---|---|
--toast-bg | var(--color-surface-float) | Background color for the toast |
--toast-color | var(--color-text) | Text color inside the toast |
--toast-border | var(--color-border) | Border color for the toast |
--toast-accent | var(--color-border-strong) | Accent color for the icon and progress bar |
--toast-min-width | 16rem | Minimum width of the toast |
| Slot | Description |
|---|---|
> svg:first-child | Leading icon -- first-child <svg>. Direct child only so a deeper SVG inside body content doesn't pick up slot styling. |
.toast-content | Content region with title and body text |
.toast-title | Title text inside the content region |
.toast-progress | The progress bar shown when a timer is counting down |
| Class | Description |
|---|---|
.toast | component root |
.is-leaving | Exit state applied by toast.js before removal |
.is-info | Info color variant for primary-tone toasts |
.is-success | Success color variant |
.is-warning | Warning color variant |
.is-danger | Danger color variant |
Toast Container
| Token | Default | Description |
|---|---|---|
--toast-max-width | 24rem | Maximum width of the toast container |
--toast-enter-y | -0.5rem | Entrance and exit direction for toasts |
| Class | Description |
|---|---|
.toast-container | component root |
.is-top-end | Top-end corner position (default) |
.is-top-start | Top-start corner position |
.is-top-center | Top-center position |
.is-bottom-end | Bottom-end corner position |
.is-bottom-start | Bottom-start corner position |
.is-bottom-center | Bottom-center position |
Tooltip
| Token | Default | Description |
|---|---|---|
--tooltip-bg | var(--color-text) | Background color for the tooltip surface |
--tooltip-color | var(--color-text-inverse) | Text color inside the tooltip |
--tooltip-padding-x | var(--ui-pad-x-tight) | Horizontal padding inside the tooltip |
--tooltip-padding-y | var(--ui-pad-y-compact) | Vertical padding inside the tooltip |
--tooltip-radius | var(--radius-sm) | Corner radius for the tooltip |
--tooltip-font-size | var(--ui-text-xs) | Font size for tooltip text |
--tooltip-max-inline-size | 16rem | Maximum width before text wraps |
--tooltip-offset | 0.375rem | Gap between the tooltip and its trigger |
--tooltip-arrow-size | 5px | Size of the directional arrow |
--tooltip-show-delay | 300ms | Delay before the tooltip appears on hover or focus |
--tooltip-fade-duration | var(--duration-fast) | Duration of the fade and slide animation |
| Class | Description |
|---|---|
.tooltip | component root |
.is-bottom | Positions the tooltip below its trigger |
.is-start | Positions the tooltip to the inline-start side of its trigger |
.is-end | Positions the tooltip to the inline-end side of its trigger |
Tooltip Wrap
| Class | Description |
|---|---|
.tooltip-wrap | component root |
Trend
| Token | Default | Description |
|---|---|---|
--trend-color | var(--color-text-subtle) | Chromatic color axis, remapped by direction variants |
| Class | Description |
|---|---|
.trend | component root |
.is-up | Upward trend, colored with success |
.is-down | Downward trend, colored with danger |
.is-neutral | Flat or unchanged trend, colored with subtle text |