A button is used to trigger actions based on a user's interaction.


Buttons are used to show priority based actions that the user can take. Thus identifying and using the right action style forms the basis of any user interface.

Where to use

  • Banner call to actions, in-page forms, and nested buttons in components like tiles
  • Inline notifications, inline field buttons and data tables, progressive forms, wizards, and single-button dialogs
  • Dialogs, side panels, and small tiles; currently Designership doesn’t offer auto-fliing buttons but you can always tweak your buttons from all 3 levels to make them fill-container. These buttons should ideally have a max width of 320px.


Anatomy of button
  1. Button Label: Shows the action name that the button performs on being pressed.
  2. Icons: Visually supporting icons to add weight to actions.

Best Practices

  1. Every screen should only have one important primary action.
  2. Build hierarchy in actions if you have multiple buttons. This helps users make decesions faster.
  3. Use precise text in button label which indicates what exactly happens when the button is pressed.

Recommended resources

Get instant access to over 6,000 Figma Components with Shipfaster UI. A Figma UI Kit & Design system used by over 2,000 designers.

Shipfaster UI - Figma Design System
Star IconStar IconStar IconStar IconStar Icon
180+ ratings
Figma's most powerful and comprehensive UI kit and design system. Get instant access to over 6,000 components.