Skip to content
mtrl
.
/
Components
Components
Styles
Examples
Documentation
GitHub ↗
⌘
K
Components
Styles
Documentation
GitHub ↗
Components
Overview
Actions
Button
Icon button
Button group
Split button
FAB
Extended FAB
Selection & input
Checkbox
Switch
Radio buttons
Chips
Slider
Text field
Select
Search
Date picker
Time picker
Navigation
Navigation rail
Drawer
Tabs
Menu
Top app bar
Bottom app bar
Containment
Card
List
Carousel
Divider
Dialog
Bottom sheet
Side sheet
Communication
Badge
Progress
Loading indicator
Snackbar
Tooltip
mtrl · Material Design 3
MIT license
Icons:
Material Symbols
by Google,
Apache 2.0
Type:
Roboto
by Google,
OFL 1.1
Vanilla
Web Components
React
Vue
Svelte
SolidJS
NAVIGATION / BOTTOM APP BAR
Documentation ↗
Bottom app bar
Keep frequent actions within reach. Try a floating action button and different placements.
Live preview
View code
Theme
Baseline
Neutral
Vibrant
Expressive
Fidelity
Content
Monochrome
Rainbow
Fruit salad
Ocean
Forest
Spring
Sunset
Autumn
Desert
Summer
Brownbeige
Sageivory
Tealcaramel
Highcontrast
Light
Dark
Copy code
CONFIGURATION
Reset
Layout
Show FAB
FAB position
center
end
Content
Action count
1
2
3
FAB label
Behavior
Visible
Esc
mtrl