# Buttons
Buttons are best used to enable a user to commit a change or complete steps in a task. They can be found inside forms, dialogs, panels, or pages. For instance, a button can be used to approve the deletion of a file in a confirmation dialog.

**Do not use Buttons as navigational elements.** Instead, use Links since it takes the user to a new page and is not associated with an action. Each page may have one or two primary buttons. Any remaining call-to-action should be represented as secondary buttons.


## Typography
Button text should be set with only the first word in a phrase and any proper nouns capitalized.

| Property | Size | Weight / Style |  
| ------ | ----------- | ----------- |
| Small button  | 12px / 1.2rem | 600 / Semibold |
| Medium button  | 14px / 1.4rem | 600 / Semibold |
| Large button  | 14px / 1.4rem | 600 / Semibold |


## Colors 
Buttons colors details change according with the product color.

Moreover, buttons has different options, this options will be according with the importance of the action: Primary, Secondary, Disable, and With icon.

Modeler
*[buttons-modeler.png]*

Studio
*[buttons-Studio.png]*

Automation
*[buttons-automation.png]*

Status
*[buttons-status.png]*


## Structure
Button control spacing.

*[buttons-anatomy.png]*

| Element | Purpose |
| ------ | ----------- |
| Button box   | Placeholder of the button. |
| Text         | Referred to the item link. |
| Icon         | Visual expression to represent capabilities, or topics of the button action. |

The button width varies based on the label length.

*[buttons-structure-icon.png]*

Also, the buttons have only two sizes: Small and Medium. 

*[buttons-structure-large.png]
[buttons-structure-medium.png]
[buttons-structure-small.png]*

| Property | Border radius | Inset padding |
| ------------ | ------------------------ |--------------------------------------|
| Small button | 2px / $bz-border-radius-s |4px 8px  /  $bz-space-inset-squish-xs
| Medium button| 4px / $bz-border-radius-m |8px 16px  /  $bz-space-inset-squish-s
| Large button | 4px / $bz-border-radius-m |16px 32px  /  $bz-space-inset-squish-l


## Accessibility
If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link  `<a>`. Everything else is a  `<button>`.
The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job.

If you absolutely cannot use a  `<button />`  element for an action and instead need to use an  `<a />`, you are required to do 2 things:

-   Add  `role="button"`  attribute to the  `<a />`  to make the element announce itself as a  `button`  element.
-   Add a JavaScript event handler for when the user presses the space key. This is because a  `button`  element will respond by default to both the enter and space keys being pressed, but an  `<a />`  element will not.

Finally, color alone does not suffice when conveying the meaning of buttons. Ensure that the text you use in the button matches the meaning you are trying to convey via color. For example, if you use the destructive button to point out a potential warning, make sure the text communicates the same message.

### Links that look like Buttons
Use these with caution: Users with visual disabilities that use dictation software may not be able to identify these actions correctly, as they can say "show buttons" and these won't highlight since they are semantically links, even though they may look like buttons.