Button

A Button is a fundamental design system component that enables users to perform actions or trigger events with a single click or tap. Buttons are typically styled to stand out, with clear labels indicating their function, such as "Submit," "Cancel," or "Learn More." They enhance user interaction by providing a simple and intuitive way to execute commands, navigate interfaces, or submit forms.

Component Status

Figma

Up to date

Status

Stable

HTML

Up to date

React

Up to date

Twig

Up to date

Design Usage

  • A layout should contain a single prominent button that makes it clear that other buttons have less importance in the visual hierarchy.
  • Text buttons use text labels, which describe the action that will occur if a user taps a button. If a text label is not used, an icon should be present to signify what the button does.
  • When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.
  • When the desired action is to take the user to a new web use the link component
  • The component Button link is important for developers. For designing user experience always use the Button component