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
ACTIONS / ICON BUTTON
Documentation ↗
Icon button
A compact action with room for expression. Try its shape, width, and toggle state.
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
Appearance
Variant
standard
filled
tonal
outlined
Size
XS
S
M
L
XL
Square shape
Width
narrow
default
wide
Content
Icon
Accessible label
Behavior
Toggle button
Selected
Disabled
Esc
mtrl