> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/button.md).

# 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.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2Fyo7oNQHsQ6cvAXvOShh4%2FFrame%2045.png?alt=media&amp;token=de4bf731-9130-4e89-b51e-3eba50dbb4f8" alt=""><figcaption></figcaption></figure>

## 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.

{% embed url="<https://www.figma.com/design/4NwKhd4dwRhRF5Zpiooi69/Components?node-id=2-165298&t=0Thv0LIO2gFzE3eo-4>" %}

## 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

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FeLefFoQ1gYcCcKPgn32B%2FFrame%20128.png?alt=media&amp;token=4a725a65-585c-444c-a144-83c05127efcd" alt=""><figcaption></figcaption></figure>

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

## 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&#x20;
3. **Text:** The label inside the button that clearly describes the action the button will perform. The text should be concise and action-oriented.

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FDQeftZ8IDGn8gccnPkiY%2FAnatomy.png?alt=media&amp;token=3ceeac38-dd54-4803-879f-688b35de72b3" alt=""><figcaption></figcaption></figure>

## Styles

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FuXUoTTIwsMQAmJbeCFan%2Fstyles.png?alt=media&amp;token=98d957ee-532d-4890-9dc6-505ffed15758" alt=""><figcaption></figcaption></figure>

## States

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FIYQrFcWgEEdST1Cxrh06%2Fstates.png?alt=media&amp;token=70666aa6-293f-4160-a15b-6c70b4fdbe31" alt=""><figcaption></figcaption></figure>

## Size

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2F7fctQAFT8Qfg2MGsnIlf%2FSize.png?alt=media&amp;token=88d976dd-8b6c-4753-9044-1c286b1e8454" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th>Size</th><th>Text (px)</th><th width="153">Icon (px)</th><th>Container Height (px)</th></tr></thead><tbody><tr><td>Small</td><td>12</td><td>16</td><td>24</td></tr><tr><td>Medium</td><td>14</td><td>16</td><td>34</td></tr><tr><td>Large</td><td>16</td><td>20</td><td>40</td></tr><tr><td>XLarge</td><td>18</td><td>24</td><td>48</td></tr><tr><td>Huge</td><td>22</td><td>32</td><td>64</td></tr></tbody></table>

## Block

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FSgVEAvAs1wTAfSYpaeKk%2FBlock.png?alt=media&amp;token=877471b9-ccce-4cf7-9325-dcd660e25d21" alt=""><figcaption></figcaption></figure>

## Corner Radius

<figure><img src="https://1456965416-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FOHrijNlCiWxhWuZ7eBdg%2Fuploads%2FHtArj6Rbp6GU7Ek4cUST%2FCorner.png?alt=media&amp;token=df2fb4c2-6908-49eb-abc7-c4dc8e24255b" alt=""><figcaption></figcaption></figure>

## 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.&#x20;
* **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.