Button

The Button component is a versatile UI element used to trigger actions or navigate users through an interface. Available in multiple variants, each button type is crafted to communicate its purpose.

Overview

Buttons are essential components that facilitate user interaction with the interface. Buttons should be clear and accessible to match different contexts and user needs.

When to use

• Use buttons for clear, actionable items where users are expected to take an action, such as submitting a form, making a purchase, or confirming a choice.

• Implement buttons for interactive elements where a user’s click or tap triggers an action.

• Use buttons to guide users through a process or workflow, ensuring they understand the next step in a series of actions, such as "Next," "Continue," or "Finish."

When not to use

• Avoid using buttons for simple navigation between pages or sections. Like jumping to a section within a page.

• Do not use buttons for non-interactive content or to display information that does not require user interaction. Static text or badges are better suited for this purpose.

• Avoid overloading a user interface with too many buttons, which can overwhelm users and create confusion about which actions are most important. Prioritize actions and use primary and secondary buttons strategically.

• Avoid using icons on both sides of the text in a button.

Types

Type	Description
Accent Button	Visually distinct buttons to highlight key actions within an interface.
Primary Button	For the important actions users can take.
Secondary Button	Complements primary buttons, secondary importance.
Inverse Button	For buttons on dark or colored backgrounds, ensuring high contrast.
Destructive Button	For actions that have significant consequences, such as deleting dara.
Hazy Button	Designed for use over complex or busy backgrounds.

Anatomy

1. Container: The outer structure of the button that defines its size and shape. It holds all other elements (text, icons) and provides the visual style such as background color, borders, padding, and hover/active states.

2. Icon: An additional visual element that can be placed either to the left or right of the text or as a standalone icon (e.g., a play button). Icons help users quickly understand the button’s purpose

3. Text: The label inside the button that clearly describes the action the button will perform. The text should be concise and action-oriented.

Styles

States

Size

Size	Text (px)	Icon (px)	Container Height (px)
Small	12	16	24
Medium	14	16	34
Large	16	20	40
XLarge	18	24	48
Huge	22	32	64

Block

Corner Radius

Accessibility

• Keyboard Navigation: Ensure all buttons are accessible via keyboard navigation, allowing users to tab through buttons and activate them using the "Enter" or "Space" key.

• Focus States: Buttons should have a visible focus state to assist users who navigate via keyboard. The focus state includes an outline or border change that clearly shows which button is active.

• Color Contrast: Maintain high contrast between the button text and background color to ensure readability for users with visual impairments. This includes meeting WCAG contrast ratio guidelines (at least 4.5:1 for normal text).

• Screen Readers: Provide descriptive labels for buttons that clearly communicate their purpose. This is especially important for icon-only buttons.

Example

• Submit Form: A primary button at the bottom of a form labeled "Submit" or "Save" that users click to submit their data.

• Cancel Action: A secondary button labeled "Cancel" placed next to a primary action button to allow users to back out of the action.

• Delete Account: A destructive button in red labeled "Delete Account," used to permanently remove a user’s account.

• Learn More: An accent button labeled "Learn More" that directs users to additional information about a feature or service.

• Play Button on Video: An icon-only button with a play icon, placed over a video. The button uses a hazy or semi-transparent background to ensure it’s visible but doesn’t obscure the video content.