Button

Common buttons prompt most actions in a UI

Usage

  • Used in places like:
  • Dialogs
  • Modal Windows
  • Forms
  • Cards

Filled Buttons

Filled buttons have the most visual impact after the FAB, and should be used for important, final actions that complete a flow, like Save, Join now, or Confirm.

Danger Buttons

Danger buttons are used for actions that are destructive, like deleting an item or canceling a process. They should be used sparingly, and only when the action is irreversible.

Outline Buttons

Outline buttons are used for secondary actions on a page, like Cancel or Close. They should be used for actions that are less important than the primary action on the page.

Ghost Buttons

Ghost buttons are used for tertiary actions on a page, like Help or Learn more. They should be used for actions that are less important than the secondary action on the page.

Rounded Buttons

Rounded buttons are used for actions that are used as an alternate themed Default.

Responsive Layouts

When scaling layouts for large screen devices, buttons can adapt their visual presentation, alignment, and arrangement to fit different contexts and user needs.