materialComponents
Try a component. Adjust the details. Copy what works.
Actions
Button
Five variants. Five sizes. Your next action.
Icon button
Compact actions, with a shape for every state.
Button group
Related actions. Shared shapes. Flexible selection.
Split button
One primary action, with more options close by.
FAB
A floating action with a clear purpose.
FAB menu
Two to six related actions, opened from a FAB.
Extended FAB
A floating action, with room for a label.
Selection & input
Checkbox
Single choices and mixed selections.
Switch
Settings that take effect immediately.
Radio buttons
One choice from a related set.
Chips
Compact choices, filters, and actions.
Slider
Values and ranges along a track.
Text field
Text entry with labels and feedback.
Select
A menu of choices in a field.
Search
Search with suggestions and an expanded view.
Date picker
Calendar and keyboard entry for dates and ranges.
Time picker
Time entry with a dial or keyboard.
Navigation
Navigation rail
Primary destinations in an expressive rail.
Navigation bar
Three to five destinations in a bar.
Drawer
Grouped destinations in a side panel.
Tabs
Related views, one active tab.
Menu
Actions and nested choices on demand.
Top app bar
A title, navigation, and contextual actions.
Bottom app bar
Frequent actions with an optional FAB.
Toolbar
Docked or floating actions, standard or vibrant.
Containment
Card
Content and actions on one surface.
List
One, two, or three lines with flexible content slots.
Carousel
Five ways to browse a visual collection.
Divider
A quiet boundary between sections.
Dialog
A focused surface for a task or decision.
Bottom sheet
Supporting content from the bottom edge.
Side sheet
Supporting details beside the main content.