Button
Buttons are basic interface elements that initialize an action or function when the user interacts with them. The appearance of the button should suggest the user takes an action that leads to different scenarios. These elements that reinforce to the user the necessity to interact are called CTA (Call to Action) components, which basically are designed to capture user attention and improve the user experience within the application.
- In instances where buttons are vertically stacked, buttons should be the same length.
- Horizontally displayed buttons are dependent on the amount of text, so button lengths may vary, always considering the minimum and maximum established sizes.
- Text or icon on a button should always be centered.
- There must be 8 pixels of space between horizontally displayed buttons.
We can identify three different variants that imply some visual changes according to color and border attributes.
Variants: primary, secondary and text.
| Variant | Description |
|---|---|
| Primary | For the principal call to action on the page; primary buttons should only appear once per screen (not including the application header or in a modal dialog). |
| Secondary | For less prominent actions; secondary buttons can be used in isolation or paired with a primary button when there are multiple calls to action. |
| Text | For the least pronounced actions; often used in conjunction with a primary button (e.g. cancel in a modal dialog). |
Any icon can be used in Halstack Design System, so it is up to the user to choose which one suits its use case better. But, it is recommended to use the same library of icons throughout the application to keep consistency.
- The icon can go before or after the text with a separation of 8 pixels respecting the main button's text.
- Do not use icons mainly for visual interest, the glyph must add information and clarification to the action that would be performed in the context of the button.
- A button with an icon and no text is also allowed in the design system. In such a situation and in order to preserve the accessibility of the button, the use of the
titleprop is mandatory. - The
titleprop offers a contextual bubble with missing information necessary to clarify the action performed by the button. It also provides an accessible gateway when no regular label can be specified. - Try to limit the use of icon-only buttons. Whenever possible, the icon should be accompanied by a label.