Components

BDS components are organized by job, not by visual type. The same taxonomy backs Storybook's sidebar.

Group	Examples
Action	Button, IconButton, LinkButton, ButtonGroup, FilterBar, FilterButton, FilterToggle, TextLink
Form	TextInput, TextArea, PasswordInput, AddressInput, Select, MultiSelect, DatePicker, TimePicker, Checkbox, Radio, Field, FieldGrid, Form
Indicator	Badge, Chip, Tag, Counter, Dot, Spinner, Skeleton, BadgeGroup, TagGroup, ServiceBadge
Feedback	Banner, Toast, Tooltip, EmptyState, ProgressBar (AlertBanner deprecated → Banner)
Control	Switch, Slider, Stepper, ProgressStepper, Pagination, SegmentedControl, FileUploader
Addable	AddableTextList, AddableComboList, AddableEntryList, AddableFieldRowList
Structure	Card, Divider, Accordion (Card family CardControl, CardList, etc. still under Displays)
Navigation	NavBar, SidebarNavigation, TabBar, Breadcrumb, Menu

Documented here

Button

Trigger an action. Twelve variants, five sizes; LinkButton + IconButton sub-components.

Button group

Group related buttons into a connected cluster. Horizontal or vertical stacking.

Filter bar

Heading + counter + filter controls row for list and table views.

Filter button

Pill-shaped dropdown filter trigger. Single-select with click-to-clear.

Filter toggle

Boolean filter trigger — on/off, no dropdown.

Text link

Styled anchor for inline navigation and footer links.

Indicator

The indicator family — read-only state communication. For interactive pills, use Chip (Action group sibling).

Badge

Status indicators with semantic colors. Read-only, six statuses, four sizes.

Badge group

Horizontal cluster of Badge elements with locked spacing.

Chip

Interactive pill for filtering, selection, removable tokens. Always wired up.

Counter

Numeric count with status colors. Notification badges, item quantities.

Dot

Minimal status circles. Six statuses, three sizes, optional pulse.

Service badge

Icon-only badge for Brik service categories.

Skeleton

Loading-state placeholder shapes. Text, circular, rectangular.

Spinner

Circular loading indicator. Inline and container sizes.

Tag

Neutral categorization labels. Read-only, four sizes, two appearances.

Tag group

Horizontal cluster of Tag elements with locked spacing.

Form / Inputs

The 10 input controls of the Form group.

Text input

Single-line input. Labels, helpers, errors, icons, sizes, any input type.

Text area

Multi-line input with configurable rows and resize behavior.

Password input

Text input with show/hide visibility toggle.

Address input

Location input with leading icon and autocomplete suggestions.

Select

Single-select dropdown. Flat or grouped options, optional leading icon.

Multi-select

Multi-pick dropdown — selected items render as removable Tag chips.

Date picker

Calendar popover for date selection. Returns a real Date object.

Time picker

Hour/minute popover. AM/PM or 24-hour display, value always HH:mm.

Checkbox

Boolean selection with a label. Controlled or uncontrolled.

Radio

Single-select from a mutually exclusive group. Group by shared name.

Form / Structure

The container, layout, and curated-multi-pick layer of the Form group. Closes out Form.

Field

Label + value pair for read-mode display. One API covers text, tags, links, lists, and empty states.

Field grid

Equal-column grid (2/3/4) for laying Fields side by side. Replaces ad-hoc inline grids.

Form

Editable container with title/description/error/success/footer. Vertical or horizontal layout.

Catalog picker

Industry-aware multi-pick with source attribution (catalog vs custom).

Feedback

User feedback surfaces — banners, toasts, tooltips, empty states, progress bars.

Banner

Full-width contextual banner. Announcement (brand surface) or status tones (replaces AlertBanner).

Alert banner

DEPRECATED — migrate to Banner with tone.

Toast

Ephemeral white-surface notification. Optional colored Badge for status.

Tooltip

Hover/focus contextual help. Four placements with arrow indicator.

Empty state

No-data placeholder with title, description, optional action.

Progress bar

Visual indicator of measurable completion. Use for uploads, multi-step forms, batch jobs.

Control

Toggles, sliders, steppers, paginators, and the file uploader.

Switch

Binary on/off toggle. Three sizes, controlled or uncontrolled.

Slider

Continuous-range input. Drag-to-select numeric values.

Stepper

Numeric input with +/− buttons. Discrete steps, exact values.

Progress stepper

Multi-step flow indicator. Steps (labeled) or dots (compact) variant.

Pagination

Page navigation with prev/next + numbers + ellipsis.

Segmented control

Pill-shaped switcher for 2-5 mutually exclusive views.

File uploader

Drag-and-drop file upload zone with click-to-browse fallback.

Addable

Add / remove list primitives. Pick by row shape — single string, vocabulary-backed string, primary+secondary, or arbitrary multi-field rows.

Addable text list

Single short string per row. Free-form, no vocabulary. Reveal-on-click input.

Addable combo list

Single string per row, picked from a known vocabulary with optional free-form fallback.

Addable entry list

Primary + secondary per row. Plain inline-edit, suggestion-mode, or read-mode.

Addable field row list

Multi-field row with type-safe data via render-prop. 2+ structured fields per row.

Structure

Content containers and separators. Card has two locked-down presets (control + summary) on top of the default flexible mode.

Card

Flexible content container. Default + control preset + summary preset. Composable with CardTitle / CardDescription / CardFooter.

Divider

Visual separator. Horizontal or vertical, four spacing scales.

Accordion

Collapsible content sections. Single-open default, optional multi-open mode.

Primary nav (NavBar / SidebarNavigation), secondary nav (TabBar / Breadcrumb), and floating Menu.

Nav bar

Top-level horizontal nav with logo, links, and actions. Optional sticky positioning.

Sidebar navigation

Fixed-position vertical sidebar with logo, nav items, footer actions, user section.

Tab bar

Horizontal tab navigation. text/tab/box variants, on-color mode for dark backgrounds.

Breadcrumb

Hierarchical position trail. Slash or chevron separators.

Card family

Specialized card layouts that compose alongside the base Card component. Each is a locked-down layout for a recurring pattern.

Card control

Settings control card — badge + title + description + action. Standalone alternative to Card preset='control'.

Card list

Layout wrapper for stacking cards vertically or horizontally.

Card testimonial

Customer testimonial card — quote, attribution, optional star rating.

Collapsible card

Expandable section in a card shell. Click to reveal content.

Pricing card

Pricing tier display with optional highlighted state for the recommended plan.

Overlays

Modal-shape surfaces — backdrop overlays for confirmations, focused tasks, and inline floating panels.

Modal

Portal-rendered dialog overlay with backdrop, escape, scroll lock. Five sizes plus confirm preset.

Dialog

DEPRECATED — migrate to Modal preset='confirm'.

Popover

Floating content panel anchored to a trigger. Click or hover, four placements.

Sheets

Sliding-panel detail views with the SheetSection wrapper and four locked typography primitives for body composition.

Sheet

Sliding panel anchored to a screen edge. Read/edit modes, tabs, secondary action, floating variant.

Sheet section

Named wrapper for content blocks inside a Sheet body. Heading + locked vertical rhythm.

Sheet typography

Four locked text primitives — SectionTitle, FieldLabel, FieldValue, HelperText.

Data displays

Tables, kanban boards, calendars, timelines, gauges, and notification lists. The Displays / Data + Displays / Charts surfaces.

Table

Data table with composable subcomponents. Sorting, selection, striped rows. Cell pattern standards for buttons + links + tooltips.

Data section

Page-side wrapper with title + subtitle + actions slot. The page analog to SheetSection.

Board

Kanban board layout — horizontal columns of grouped items with avatar + progress.

Calendar

Date-based display. WIP placeholder — not yet implemented.

Activity timeline

Vertical chronological list of events. Activity feeds, audit logs.

Meter

Visual gauge for a value within a known range. Status colors, three sizes.

Notification list

Vertical list of clickable notification items with empty state.

Assets + utilities

Identity primitives, icon reference, page-level chrome, list and console utilities. The long tail that lives outside the main component categories.

Avatar

User profile image with initials fallback. Four sizes, four presence states.

Icons

Iconify + Phosphor icon reference. Inline SVGs, no CDN, six weights per icon.

Footer

Site-wide footer with logo, columns, social links, copyright. Default + brand variants.

Page header

Composable page-level header. Title + breadcrumbs + actions + tabs + metadata + stats.

Bullet list

Structured short-item list. disc / decimal / none markers, two density modes.

Task console

Floating progress console for long-running batch operations. Per-item state, auto-dismiss.

Every shipped BDS component has a docs page. The migration from Storybook MDX to design.brikdesigns.com is done. Storybook becomes the playground for live prop exploration; this site is the canonical guidance surface.

Remaining work tracked separately:

Motion foundation port (the deferred big lift in the Foundations section)
Industry packs for the Content System (Real Estate RV/MHC, Real Estate Commercial, Small Business)
Voice patterns (×8) and Atmospheres (×7) for the Content System
Netlify deploy + design.brikdesigns.com DNS

Page template

Every component page on this site follows the same structure. See Contribution → Page templates for the full reference. Short version: Use it for / Import / Anatomy / Variants / When (not) to use / Accessibility / API / Related.

Button is the canonical example — new pages should match its structure section-by-section.