75 component owners

The complete Brick catalog

Search when you know the name, or start with the interface problem you need to solve. Every result opens a live example and a consumer-first guide.

Start with the outcome

What are you building?

Browse by purpose when you know the job but not yet the component name.

Component finder

Find the right finished part

75 results

Actions & selection

Button

Actions & selection

Button presents a finished action or emphasized native link.

Icon Button

Actions & selection

IconButton presents one named icon-only action or a button-styled native link with finished Brick geometry and recipes over public Atom Button behavior.

Pagination

Actions & selection

Pagination navigates a finite, known set of numbered pages with native buttons.

Toggle

Actions & selection

Toggle is a persistent pressed/unpressed command built on Atom Toggle with Brick visual recipes.

Toggle Group

Actions & selection

ToggleGroup coordinates related single- or multiple-selection pressed commands using Atom state and keyboard behavior plus Brick recipes.

Toolbar

Actions & selection

Toolbar presents related commands as one named, keyboard-navigable control group.

Forms & choices

Checkbox

Forms & choices

Checkbox is a styled binary or mixed-state form choice built on Atom Checkbox.

Checkbox Group

Forms & choices

CheckboxGroup coordinates related Checkbox-style items, optional item text, and an aggregate parent control.

Combobox

Forms & choices

Combobox is Brick's finished searchable single-value choice control.

Field

Forms & choices

Field coordinates one control’s label, description, error, and required state.

Fieldset

Forms & choices

Fieldset coordinates a related control group with a legend, description, and group error.

File Upload

Forms & choices

File Upload is Brick's styled file picker, drop target, and removable selected-file list, backed directly by Atom.

Form

Forms & choices

Form is Brick’s styled form boundary over Atom’s native form behavior.

Input

Forms & choices

Input is a finished single-line text-entry control built on Atom Input.

Multi Select

Forms & choices

MultiSelect is Brick's styled multiple-value choice control.

Number Input

Forms & choices

Number Input is a finished numeric entry control backed by Atom Number Input.

OTP Field

Forms & choices

OTP Field is segmented one-time-code entry backed by Atom OTP Field.

Password Toggle Field

Forms & choices

Password Toggle Field is native password entry with an explicitly named visibility action, backed by Atom Password Toggle Field.

Radio Group

Forms & choices

Radio Group is Brick's finished single-selection control for short visible choice sets.

Rating

Forms & choices

Rating is Brick's styled small-scale score input, backed by Atom 0.19.6.

Select

Forms & choices

Select is Brick's finished single-value, select-only choice control.

Slider

Forms & choices

Slider is Brick's styled numeric single-value and range input, backed by Atom 0.19.6.

Switch

Forms & choices

Switch is Brick's finished binary setting control.

Textarea

Forms & choices

Textarea is Brick's finished native multi-line plain-text control.

Content & status

Accordion

Content & status

Accordion coordinates named, in-flow disclosure sections with single or multiple selection, accessible keyboard navigation, and finished surfaces.

Avatar

Content & status

Avatar presents an image or fallback identity in a finished Brick frame.

Badge

Content & status

Badge is a compact passive label for categories, status, or short metadata.

Card

Content & status

Card is a static compound surface for grouping information and related actions about one subject.

Chip

Content & status

Chip presents one compact authored or selected value with an optional, explicitly named remove action.

Code

Content & status

Code renders short inline technical text with native `code` semantics and finished Brick recipes.

Code Block

Content & status

Code Block presents structured multi-line source with native scrolling, explicit language metadata, and truthful Atom-backed copy behavior.

Collapsible

Content & status

Collapsible reveals one independent in-flow content region from a linked button trigger.

Divider

Content & status

Divider draws a low-emphasis structural line between adjacent content groups.

Icon

Content & status

Icon gives one consumer-supplied SVG a consistent Brick size, semantic color, alignment, direction, and accessibility mode.

Image

Content & status

Image presents ordinary raster or vector media with authored alternative text, deterministic loading/fallback anatomy, fit and focal-position recipes, stable aspect ratio, and f…

List

Content & status

List presents related static content through native unordered or ordered list semantics, finished markers and boundaries, and optional structured row anatomy.

Notification Badge

Content & status

NotificationBadge overlays a visual count or dot on exactly one child.

Progress

Content & status

Progress is Brick's linear, read-only task-progress component for known, unknown, and buffered work.

Progress Circle

Content & status

Progress Circle is Brick's compact circular task-progress component for known and unknown work.

Skeleton

Content & status

Skeleton preserves expected content geometry while an application-owned loading operation is incomplete.

Table

Content & status

Table presents static row-and-column relationships with native HTML semantics, finished visual recipes, logical alignment, and explicit responsive containment.

Text

Content & status

Text is Brick's finished component for authored headings, paragraphs, inline copy, captions, supporting descriptions, and status copy.

Toast

Content & status

Toast reports a temporary, non-blocking application outcome or process update.

Overlays & menus

Alert Dialog

Overlays & menus

AlertDialog interrupts the current workflow for a brief, important decision that requires an explicit response.

Context Menu

Overlays & menus

Context Menu provides commands for a pointer or touch context region through Atom-owned semantics and behavior.

Dialog

Overlays & menus

Dialog presents a focused modal task or information surface above the current page.

Drawer

Overlays & menus

Drawer is a modal task surface that enters from a logical or physical edge.

Dropdown Menu

Overlays & menus

Dropdown Menu provides button-triggered commands, persistent choices, and nested actions through Atom-owned semantics and behavior.

Hover Card

Overlays & menus

HoverCard shows nonessential preview information from a link-like trigger.

Menubar

Overlays & menus

Menubar provides persistent desktop-style command categories through Atom-owned semantics and behavior.

Popover

Overlays & menus

Popover presents click-open contextual content anchored to a trigger or anchor.

Tooltip

Overlays & menus

Tooltip supplies a short supplementary label or description for a trigger.

Navigation & layout

App Bar

Navigation & layout

AppBar is a top surface and one-row alignment structure built on Atom AppBar.

Bottom Navigation

Navigation & layout

Bottom Navigation presents three to five stable, equal-priority top-level destinations in a compact navigation surface.

Breadcrumb

Navigation & layout

Breadcrumb is Brick's finished hierarchy trail.

Container

Navigation & layout

Container creates a centered, fluid content boundary with a closed maximum measure and logical inline gutters.

Grid

Navigation & layout

Grid is Brick's two-dimensional layout primitive.

Hide

Navigation & layout

Hide keeps content mounted while removing it from visual layout from one fixed viewport breakpoint.

Link

Navigation & layout

Link is Brick's finished typographic navigation component.

Nav List

Navigation & layout

Nav List renders finished native navigation lists, current destinations, and optional grouped disclosure sections on Atom NavList behavior.

Scroll Area

Navigation & layout

Scroll Area constrains native browser scrolling to explicit axes while keeping content, input, momentum, and platform scrollbar behavior native.

Show

Navigation & layout

Show keeps content mounted and adds it to visual layout from one fixed viewport breakpoint.

Sidebar

Navigation & layout

Sidebar coordinates a finished persistent complementary panel with main content on Atom Sidebar state and accessibility behavior.

Stack

Navigation & layout

Stack is Brick's one-dimensional layout primitive.

Surface

Navigation & layout

Surface paints a semantic region with a controlled background level, optional border, elevation, radius, and inset.

Tabs

Navigation & layout

Tabs switches between related peer panels while preserving complete keyboard, selection, and panel relationships through Atom.

Data & collections

Data Grid

Data & collections

Data Grid presents tabular data with Atom-owned cell navigation, row selection, active-cell semantics, and sortable-header activation.

Feed

Data & collections

Feed presents a styled dynamic stream of rich, focusable articles.

Swipeable Item

Data & collections

Swipeable Item is a styled three-part boundary that reveals quick actions from logical start or end.

Tree

Data & collections

Tree presents a one-dimensional hierarchy with Atom-owned focus, keyboard, selection, expansion, typeahead, direction, form, and accessibility behavior.

Tree Grid

Data & collections

Tree Grid presents hierarchical rows with Atom-owned cell navigation, expansion, selection, active-cell semantics, and sortable-header activation.

Accessibility

Aspect Ratio

Accessibility

Aspect Ratio reserves stable width-to-height geometry for authored media, embeds, placeholders, and layout content.

Skip Link

Accessibility

Skip Link provides a finished, visible-on-focus bypass link and its matching primary-content destination.

Visually Hidden

Accessibility

Visually Hidden keeps authored text available to assistive technology while removing its visual layout footprint.

The complete Brick catalog

What are you building?

Find the right finished part

Actions & selection

Button

Icon Button

Pagination

Toggle

Toggle Group

Toolbar

Forms & choices

Checkbox

Checkbox Group

Combobox

Field

Fieldset

File Upload

Form

Input

Multi Select

Number Input

OTP Field

Password Toggle Field

Radio Group

Rating

Select

Slider

Switch

Textarea

Content & status

Accordion

Avatar

Badge

Card

Chip

Code

Code Block

Collapsible

Divider

Icon

Image

List

Notification Badge

Progress

Progress Circle

Skeleton

Table

Text

Toast

Overlays & menus

Alert Dialog

Context Menu

Dialog

Drawer

Dropdown Menu

Hover Card

Menubar

Popover

Tooltip

Navigation & layout

App Bar

Bottom Navigation

Breadcrumb

Container

Grid

Hide

Link

Nav List

Navigation Menu

Scroll Area

Show

Sidebar

Stack

Surface

Tabs

Data & collections

Data Grid

Feed

Swipeable Item

Tree