AZURA

 Pre-alpha
Github

Main Menu

  • Get Started
  • Breakpoints
  • Changelog

  • Framework Style

    • Grid
    • Flex
    • Colors
    • Typography
    • Round
    • Elevation
    • Backdrop
    • Buttons
    • Icons
    • Images
    • Cards
    • Form inputs and control
    • Text fields
    • Content panels
    • Carousel
    • Validation Form
    • Dialogs
    • Input controls
    • Lists
    • Textareas
    • Forms
    • File Inputs
    • Ajax
    • Viewport
    • Select
    • Scrollbar

Buttons

When choosing the right button for an action, consider the level of emphasis inherent to a button type.

Primary Buttons

Each screen should contain a single prominent button for the primary action. This high-emphasis button commands the most attention. The arrangement of on-screen elements should clearly communicate that other buttons are less important.

button button-s ripple
button button-s ripple disabled

button button-m ripple
button button-m ripple disabled

button button-l ripple
button button-l ripple disabled

Small

Medium

Large

Outlined Buttons

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.

button button-s outlined ripple
button button-s outlined ripple disabled

button button-m outlined ripple
button button-m outlined ripple disabled

button button-l outlined ripple
button button-l outlined ripple disabled

Small

Medium

Large

Text Buttons

Text buttons have less visual prominence, so should be used for low emphasis actions, such as an alternative option.

button button-s text ripple
button button-s text ripple disabled

button button-m text ripple
button button-m text ripple disabled

button button-l text ripple
button button-l text ripple disabled

Small

Medium

Large

Elevated Buttons

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.

button button-s elevated ripple
button button-s elevated ripple disabled

button button-m elevated ripple
button button-m elevated ripple disabled

button button-l elevated ripple
button button-l elevated ripple disabled

Small

Medium

Large

Tonal Buttons

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.

button button-s tonal ripple
button button-s tonal ripple disabled

button button-m tonal ripple
button button-m tonal ripple disabled

button button-l tonal ripple
button button-l tonal ripple disabled

Small

Medium

Large

Contents

  • Primary buttons
  • Outlined buttons
  • Text buttons
  • Elevated buttons
  • Tonal buttons