mtrlComponents
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.
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
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.