💠 Button

💠 Button

Triggers an event or action. They let users know what will happen next.

Usage

The Button component is an essential interface element that triggers events or actions when clicked or tapped by the user.

Buttons are used to initiate various tasks like form submission, modal opening, feature activation, or navigating to another section of the application.

A well-designed Button should clearly communicate its purpose and indicate to users what will happen when it is activated.

When to use

  • Form submission: Use Buttons for submitting forms after users have entered their information.
  • Action initiation: Employ Buttons to initiate actions like creating, editing, deleting, or sharing content.
  • Navigation: Utilize Buttons to navigate users to different areas of your application or to progress through multi-step workflows.
  • Command execution: Use Buttons to execute commands such as starting a process, refreshing data, or applying settings.

Avoid using Buttons for non-interactive elements, such as status indicators or badges. Do not overcrowd your interface with too many Buttons, as this can lead to decision fatigue for users.

Example

Primary

Secondary

Text

Link

Danger

With Icon

Icon

As child

Useful links

Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager: