Alert

Contextual feedback for user actions — info, success, warning, and error severity levels.

Snackbar

Brief, non-blocking messages that appear at the bottom of the screen and auto-dismiss.

Dialog

Modal overlays for confirmations, forms, and detail views.

Tooltip

Short contextual hints that appear on hover, revealing extra detail without cluttering the UI.

Button

Primary call-to-action element available in filled, outlined, and text variants.

Icon Button

Compact button using only an icon — ideal for toolbars and action columns.

FAB – Floating Action Button

Prominent circular button for the primary action on a screen.

Button Group / Toggle Group

Groups of mutually-exclusive or multi-select options rendered as joined buttons.

Text Field

Single-line and multi-line text inputs in outlined, filled, and underlined modes.

Numeric Field

Number input with optional spin controls and validation.

Select

Dropdown selection from a predefined list of options.

Autocomplete

Text input with real-time search suggestions from a data source.

Checkbox

Boolean toggle for individual options or selecting rows in a list.

Radio Group

Mutually-exclusive options — only one can be selected at a time.

Switch

Binary toggle typically used for enabling or disabling a feature.

Slider

Range input for selecting a value or range along a continuous scale.

Rating

Star (or icon) rating input for collecting user feedback scores.

Date Picker

Calendar overlay for selecting a single date or a date range.

Time Picker

Clock-face overlay for selecting hours and minutes.

File Upload

Drag-and-drop or click-to-browse file input.

Breadcrumbs

Shows the current page location within the site hierarchy.

Tabs

Switches between related content panels within the same page context.

Stepper

Guides users through a multi-step workflow with clear progress indication.

Pagination

Breaks a long list into numbered pages with prev/next controls.

Tree View

Hierarchical data displayed as an expandable nested list.

Data Table

Sortable, paginated grid for structured datasets with hover rows.

Card

Surface container for related content — supports header, media, body, and action areas.

Chip

Compact labels for tags, categories, status indicators, and filter pills.

Avatar & AvatarGroup

User or entity representations using initials, icons, or images.

Badge

Small numerical or status overlay on an icon or avatar.

Timeline

Chronological list of events with connectors and optional content.

Expansion Panel

Collapsible content sections that conserve vertical space.

List

Structured rows of items — supports icons, avatars, secondary text, and click actions.

Progress Indicators

Linear and circular indicators for loading states and completion percentages.

Skeleton

Placeholder shapes that mimic content layout while data is loading.

Paper

The foundational surface element — used under cards, popovers, drawers, and dialogs.

Divider

Horizontal or vertical rule separating distinct sections of content.

Grid

12-column responsive layout system with breakpoint control.

Typography Scale

Complete type scale — headings use BrandonGrotLight, body uses AvenirLight.

Links

Inline text links inherit the gold accent colour with hover transition.

Icons

Material Design icon library — scale, colour, and size variants.

Colour Palette

All brand colours from the Mezzo design token set.