The Button Component: Empowering User Interaction
The Button component is a core UI element that allows users to trigger actions or navigate within your application or website.
Features
Discover the key features of the Button component.
Versatile Actions
Buttons support a wide range of actions, from simple clicks to complex interactions. With future-proof design, anticipate evolving user needs seamlessly.
Interactive Feedback
Instant visual and auditory feedback ensures users feel engaged and informed. Enhance user experiences with predictive feedback systems that anticipate user actions.
Flexible Styling
Easily customize buttons to match your brand's aesthetic and design language. Empower future innovations with scalable styling options tailored to emerging trends.
Anatomy
Text Label
Centralized descriptive text which uses the color text-primary-inverse.
Background
Main canvas of the button using the color background-brand.
Icons
Optional visual elements that can be situated on either the left or the right side of the text to accentuate or describe the button's functionality.
Example Use Cases
Primary Action Buttons
Used for prominent actions such as submitting forms, confirming decisions, or initiating processes.
Secondary Action Buttons
Used for less prominent actions such as canceling operations, closing dialogs, or navigating to secondary screens.
Navigation Buttons
Used for navigating between pages, sections, or tabs within an application or website.
Call-to-Action Buttons
Used to encourage users to take specific actions such as signing up, subscribing, or making a purchase.
Guidelines for Usage
When using the Button component, consider the following guidelines to ensure consistency, usability, and accessibility:
Consistent Styling: Maintain a consistent visual style for buttons throughout the application or website to provide a cohesive user experience. Use consistent colors, typography, and sizing to make buttons easily recognizable.
Clear Affordance: Ensure that buttons have clear visual affordances that distinguish them from other elements on the page. Use appropriate contrast, shadows, or borders to make buttons stand out and indicate their interactive nature.
Descriptive Labels: Use descriptive and action-oriented labels for buttons that clearly communicate their purpose or the action they perform. Avoid vague or ambiguous labels that may confuse users.
Accessibility: Ensure that buttons are accessible to all users, including those using assistive technologies or keyboard navigation. Use semantic HTML elements, such as button or link, and provide appropriate focus states and keyboard interactions.
Responsive Design: Design buttons to be responsive and adaptable to different screen sizes and devices. Use responsive design techniques to adjust button sizes, spacing, and positioning for optimal usability on various devices.
Variants
.btn-primary
The main style for the component, often used for primary actions or the most important interactions, typically featuring bold colors and a solid background to stand out.
.btn-secondary
A less prominent style for the component, used for secondary actions or supplementary interactions, often with a more subdued color palette and less emphasis.
.btn-outlined
A style featuring an outline, providing a distinct look often used for emphasis or differentiation, typically with a transparent background and a colored border.
.btn-outlined
A style indicating a critical or irreversible action, often highlighted in red or another attention-grabbing color, signaling to the user that the action should be taken with caution.
Sizes
.btn-small
A compact size for the component, ideal for limited space or subtle emphasis, making it less prominent but still functional and visible.
.btn-medium
The standard size for the component, providing a balance between visibility and space, suitable for most typical use cases and standard interfaces.
.btn-large
A larger size for the component, ensuring it stands out and is easily noticeable, often used for primary actions or important interactions to draw user attention.
.btn-extra-large
The largest size for the component, making it highly prominent and easy to interact with, often used in high-impact areas or for very important actions.
States
.btn :enabled
The default state where the component is fully interactive and ready for user actions. It appears normal and invites interaction.
.btn :hover
The state when a user places their cursor over the component, indicating it is ready for interaction and often visually changes to show responsiveness.
.btn :focus
The state showing that the component is currently selected or active, highlighted for user awareness and accessibility purposes, often with a border or shadow.
.btn :*disabled
The state where the component is visible but non-interactive, indicating it is not available for use. It often appears faded or greyed out to signal its inactivity.
Best Practices vs. Common Pitfalls
Do:
Ensure the text label succinctly and effectively communicates the button's action.
Opt for a relevant icon that complements and elevates the button's purpose.
Use the correct button size based on its importance and the UI's spatial needs.
Don't:
Overpopulate a space with btn.extra-large. Use it selectively for central actions.
Cluster multiple primary buttons adjacent to each other. If several primary actions are required, reevaluate the design approach.
Deploy the destructive button without an ensuing confirmation or warning step.