Filled buttons
The loudest voice on the page. Use one filled button per view, for the action you most want people to take.
With icon, square corners, disabled
Tonal buttons
Middle emphasis: important, but not the headline act. A filled look in a calmer color.
With icon, square corners, disabled
Elevated buttons
A surface-colored button with a shadow, for when it must stand apart from a busy or colored background.
With icon, square corners, disabled
Outlined buttons
Medium emphasis with a visible boundary. A good fit for secondary actions that deserve their own space.
With icon, square corners, disabled
Text buttons
The quietest option, for low-emphasis actions inside cards, dialogs, and dense layouts.
With icon, square corners, disabled
Toggle buttons
Every variant can hold a pressed state — these are live, try them. The icon can swap when selected.