Extras
Components shipped from src/css/extras/ and
src/js/extras/, opt-in via the
brio-extras bundle. Same conventions as core
components -- semantic-first, ARIA-driven state, the four-color
status family where applicable, the same archetypes from
PRINCIPLES.md P3 -- with a separate bundle so
consumers ship only what they use.
The line between core and extras: core is what a typical web app needs on day 1 (alert, button, card, dialog, drawer, sidebar, navbar, input, table, toast, and so on). Extras solve common shapes a portion of projects need (avatars, breadcrumbs, pagination, timelines, progress, ratings, skeletons, and the rest). Both follow the same principles; only the bundle membership differs.
To use the extras, add both bundles to your page, or you can pull them in individually:
<link rel="stylesheet" href="/assets/brio.css">
<link rel="stylesheet" href="/assets/brio-extras.css">
<script type="module" src="/assets/brio.js"></script>
<script type="module" src="/assets/brio-extras.js"></script>
<script type="module" src="path/to/brio/src/js/extras/avatar.js"></script>
Browse the full list in the sidebar. Each extras page follows the same rhythm as a core component page: intent, basic usage, variants and options, class reference, customization tokens, and accessibility notes.