The Halstack button component is a versatile and accessible UI element designed to trigger user actions across applications. It supports multiple variants, including primary, secondary, and text buttons, ensuring flexibility in different use cases. The button's appearance suggests 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.
- 1.Container: the interactive/clickable area of the button.
- 2.Icon: a visual element that complements the label, providing additional meaning or enhancing recognition.
- 3.Label: displays the textual action that the button is going to carry out.
We can identify three different variants that imply some visual changes according to color and border attributes.
| 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.
Semantic buttons use specific colors to convey the nature of the action they trigger. They provide immediate context about the action's significance or the feedback it represents.
| Semantic | Description |
|---|---|
| Default | Neutral action with no specific context. Typically used for general actions. Shown in the brand's primary color. Use for neutral actions such as "Submit", "Save" or "Continue.”. |
| Error | Indicates a destructive action or highlights a critical issue. Styled in red. Use for actions like "Delete", "Remove" or "Cancel Subscription.”. |
| Info | Provides additional information or context. Shown in blue, the brand's secondary color. Use for actions like "More Info", "Details" or "Learn More.”. |
| Success | Represents a positive action or confirms the completion of a task. Styled in green. Use for actions like "Confirm", "Complete" or "Approve.”. |
| Warning | Alerts the user to potential issues or actions that need caution. Styled in orange. Use for actions like "Warning" or "Attention Needed.”. |
The context in which a button is used often dictates its size. Halstack provides buttons in different sizes to help create interfaces that are not only functional but also intuitive and accessible, catering to a wide range of user needs and interaction scenarios.
Varying button sizes help establish a clear visual hierarchy, guiding users towards the most critical actions. Primary actions are made more prominent with larger buttons, while secondary actions use smaller buttons to avoid distraction.
Small buttons help to maintain a clean and uncluttered interface, especially in dense layouts. They are suitable for scenarios where precise actions are needed, often accompanied by icons for quick recognition.
Use cases:
- Compact spaces: Small buttons are ideal for areas with limited space, such as tables, forms, and other components.
- Secondary actions: They can be used for less prominent actions that are not the primary focus of the user's interaction.
Medium buttons provide a good balance between visibility and space usage, making them versatile for various design contexts.
Use cases:
- General use: Medium buttons are the standard size for most button interactions across web and mobile applications.
- Primary actions: They are often used for primary actions on forms, dialogs, and other key interaction points.
- Consistency: Using medium buttons as the default ensures a consistent look and feel across the application, aiding user familiarity and navigation.
Large buttons draw attention and encourage interaction, which is vital for important actions. They create a visual hierarchy, emphasizing the most important actions and guiding users towards them.
Use cases:
- Prominent actions: Large buttons are used for primary or critical actions that require high visibility, such as "Submit", "Save" or "Purchase".
- Call to action (CTA): They are often employed in call-to-action sections where user engagement is crucial, like landing pages.
- Use actionable language: Start with a verb that clearly describes the action. Examples: "Submit", "Save" or "Delete".
- Keep it short: Aim for one or two words. Longer text can make buttons harder to read and understand quickly.
- Avoid ambiguity: Make sure the button's purpose is immediately clear. Avoid vague labels like "Click here" or "Go".
- Use specific nouns: If necessary, include a noun to provide more context. Examples: "Add item", "View details".
- Consistent terminology: Use the same terms for similar actions across your interface to avoid confusion. For example, always use "Submit" for form submissions.
- Sentence case: Use sentence-style capitalization—only capitalize the first word. This improves readability and looks more approachable.
- User-centric language: Write from the user's perspective. For actions that the user performs, consider using first-person pronouns (e.g., "My profile").
- Positive tone: Where possible, frame actions positively to encourage interaction. For example, use "Continue" instead of "Next".
- Descriptive labels: Ensure that the button copy makes sense out of context for screen reader users. Avoid labels like "More" without additional context.
- Avoid jargon: Use plain language that is easily understood by all users, including those who may not be familiar with technical terms.
- Primary action first: Ensure the primary action stands out with a prominent position and styling.
- Avoid redundant text: Do not include unnecessary words that do not add value to the action.
- Test for clarity: Show your button text to others without context to see if they understand the action.
- Iterate based on feedback: Be open to changing your button copy based on user feedback and testing results.
- Avoid punctuation: Do not use end punctuation in button labels unless absolutely necessary.