Button

Buttons allow users to perform actions within a surface. They can be used alone for immediate action, or as a trigger for another component, also known as Action or CTA.

Design documented

The component is fully documented

React documented

Flutter documented

Design

Is the design finished and component available in Figma library?

Up to date

React

Is new design vision part implemented using new tokens?

Up to date

Flutter

Is new design vision part implemented using new tokens?

Up to date

Introduction

Buttons are clickable or tappable elements that are used to trigger actions. They communicate calls to action to the user, and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.

When to use

Use buttons to communicate actions users can take and to allow users to interact with the page. Each page should have only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.

When not to use

Do not use buttons as navigational elements. Instead, use links when the desired action takes the user to a new page.

null