The elevator button was feeling down, so I gave it a lift.
The filled button’s contrasting surface color makes it the most prominent button after the FAB. It’s used for final or unblocking actions in a flow.
Filled tonal buttons have a lighter background color and darker label color, making them less visually prominent than a regular, filled button. They’re still used for final or unblocking actions in a flow, but do so with less emphasis.
Use an outlined button for actions that need attention but aren’t the primary action, such as See all or Add to cart. This is also the button to use for giving someone the opportunity to change their mind or escape a flow.
Elevated buttons are essentially filled buttons with a lighter background color and a shadow. To prevent shadow creep, only use them when absolutely necessary, such as when the button requires visual separation from a patterned background.
Text buttons have less visual prominence, so should be used for low emphasis actions, such as an alternative option.
To add icons to any of these buttons, use a link block with the same button classes as are on the Webflow button.
Segmented buttons have more visual prominence than a single icon button. Use these in place of a tabbed control when designing web apps. If the current page is selected, the relevant segment shows an accent colour in-text.