Brand Design System

Material Components

35 Material Design 3 components adapted to work seamlessly with Brand theming. These components follow Google's Material Design guidelines while respecting brand-specific styling.

About Material Design Integration

Brand integrates Material Design 3 (M3) components to provide a comprehensive UI toolkit. These components:

  • Follow Material Design 3 specifications for behavior and accessibility
  • Use Brand design tokens for colors, typography, and spacing
  • Automatically adapt to the active brand theme
  • Can be combined with Brand Elements and Components

Categories

Actions

5

Interactive action elements for user input

FAB, Button, Icon Button, Segmented Button, Split Button

Communication

5

Feedback and status communication elements

Badges, Snackbar, Tooltips, Progress Indicator, Loading Indicator

Containment

4

Container elements for content organization

Cards, Dialogs, Bottom Sheets, Side Sheets

Navigation

5

Navigation and wayfinding elements

App Bar, Tabs, Navigation Rail, Navigation Bars, Menus

Selection

5

Selection and input control elements

Checkboxes, Radio Button, Switch, Chips, Sliders

Text Inputs

4

Text and data entry elements

Text Fields, Search, Date Picker, Time Picker

All Material Components

Complete list of Material Design components being integrated into Brand:

ComponentStatus
FABTodo
FAB MenuTodo
Bottom SheetsTodo
ChipsTodo
ToolbarsTodo
Button GroupTodo
Text FieldsTodo
TabsTodo
Icon ButtonTodo
SwitchTodo
SnackbarTodo
SlidersTodo
Side SheetsTodo
TooltipsTodo
CheckboxesTodo
SearchTodo
CarouselTodo
Radio ButtonTodo
CardsTodo
MenusTodo
BadgesTodo
Progress IndicatorTodo
App BarTodo
Loading IndicatorTodo
ListsTodo
DividersTodo
DialogsTodo
Time PickerTodo
Date PickerTodo
Navigation RailTodo
Navigation BarsTodo
ButtonTodo

Design Token Mapping

Material components use Brand design tokens through CSS custom properties. This ensures consistent theming across all components:

M3 TokenBrand Token
--md-sys-color-primary--color-primary
--md-sys-color-secondary--color-secondary
--md-sys-color-surface--color-surface
--md-sys-color-error--color-error
--md-sys-typescale-body-large-font--font-body
--md-sys-shape-corner-medium--radius-md

Usage Guidelines

  • Use Material components for interactive UI patterns (forms, dialogs, navigation)
  • Combine with Brand Components for page layouts and content blocks
  • Maintain consistency by using the same brand theme across all components
  • Follow Material Design accessibility guidelines for all implementations