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 apt to the user to choose between one of the multiple options that are offered through internet but it is recommended to use the same library of icons along the application to keeping concistency.
- 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.