# Tokens

## .sds\_Button (General) <a href="#general" id="general"></a>

| Component Token                 | Theme Token                                                                                                     |
| ------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| --sds\_button\_padding          | 0.5rem 0.8rem                                                                                                   |
| --sds\_button\_border\_radius   | <p><strong>--sds_theme_border_radius</strong></p><p>0.5rem</p>                                                  |
| --sds\_button\_border\_width    | 1px                                                                                                             |
| --sds\_button\_border\_style    | solid                                                                                                           |
|                                 |                                                                                                                 |
| --sds\_button\_focus\_highlight | <p><strong>--sds_theme_focus_highlight</strong></p><p>sds-color(blue)</p>                                       |
| --sds\_button\_focus\_shadow    | <p><strong>--sds_theme_focus_shadow</strong></p><p>0 0 0 2px sds-color(grey, 05), 0 0 0 4px sds-color(blue)</p> |

## .sds\_Button\_Disabled

| Component Token                  | Theme Component                                                |
| -------------------------------- | -------------------------------------------------------------- |
| --sds\_button\_disabled\_opacity | <p><strong>--sds_theme_disabled_opacity</strong></p><p>48%</p> |

## .sds\_Button\_Type\_Base

| Component Token                        | Theme Token                                                                                                                                                              |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| --sds\_button\_background              | <p><strong>--sds_theme_button_background</strong></p><p>linear-gradient( </p><p>  to bottom, </p><p>  sds-color(white) 0%,</p><p>  sds-color(grey, 05) 100% </p><p>)</p> |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_border</strong></p><p>sds-color(grey, 30)</p>                                                                                              |
| --sds\_button\_text                    | <p>--<strong>sds_theme_button_text</strong></p><p>sds-color(grey, 100)</p>                                                                                               |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_icon</strong></p><p>sds-color(grey, 70)</p>                                                                                                |
|                                        |                                                                                                                                                                          |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_interactive_background</strong></p><p>sds-color(grey, 10)</p>                                                                              |
| --sds\_button\_interactive\_border     | <p><strong>--sds_theme_button_interactive_border</strong></p><p>sds-color(grey)</p>                                                                                      |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_interactive_text</strong></p><p>sds-color(grey, 100)</p>                                                                                   |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_interactive_icon</strong></p><p>sds-color(grey, 100)</p>                                                                                   |

## .sds\_Button\_Type\_Primary

|                                        |                                                                                                     |
| -------------------------------------- | --------------------------------------------------------------------------------------------------- |
| --sds\_button\_background              | <p><strong>--sds_theme_button_primary_background</strong></p><p>sds-color(blue)</p>                 |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_primary_border</strong></p><p>sds-color(blue, 60)</p>                 |
| --sds\_button\_text                    | <p><strong>--sds_theme_button_primary_text</strong></p><p>sds-color(white)</p>                      |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_primary_icon</strong></p><p>sds-color(white)</p>                      |
|                                        |                                                                                                     |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_primary_interactive_background</strong></p><p>sds-color(blue, 60)</p> |
| --sds\_button\_interactive\_border     | <p><strong>--sds_theme_button_primary_interactive_border</strong></p><p>sds-color(blue, 60)</p>     |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_primary_interactive_text</strong></p><p>sds-color(white)</p>          |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_primary_interactive_icon</strong></p><p>sds-color(white)</p>          |

## .sds\_Button\_Type\_Secondary

|                                        |                                                                                                                                                                                    |
| -------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| --sds\_button\_background              | <p><strong>--sds_theme_button_secondary_background</strong></p><p>linear-gradient( </p><p>  to bottom, </p><p>  sds-color(white) 0%,</p><p>  sds-color(grey, 05) 100% </p><p>)</p> |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_secondary_border</strong></p><p>sds-color(grey, 30)</p>                                                                                              |
| --sds\_button\_text                    | <p><strong>--sds_theme_button_secondary_text</strong></p><p>sds-color(blue, 60)</p>                                                                                                |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_secondary_icon</strong></p><p>sds-color(blue)</p>                                                                                                    |
|                                        |                                                                                                                                                                                    |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_secondary_interactive_background</strong></p><p>sds-color(blue, 60)</p>                                                                              |
| --sds\_button\_interactive\_border     | <p><strong>--sds_theme_button_secondary_interactive_border</strong></p><p>sds-color(blue, 60)</p>                                                                                  |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_secondary_interactive_text</strong></p><p>sds-color(white)</p>                                                                                       |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_secondary_interactive_icon</strong></p><p>sds-color(white)</p>                                                                                       |

## .sds\_Button\_Type\_Danger

|                                        |                                                                                                   |
| -------------------------------------- | ------------------------------------------------------------------------------------------------- |
| --sds\_button\_background              | <p><strong>--sds_theme_button_danger_background</strong></p><p>sds-color(red)</p>                 |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_danger_border</strong></p><p>sds-color(red, 60)</p>                 |
| --sds\_button\_text                    | <p><strong>--sds_theme_button_danger_text</strong></p><p>sds-color(white)</p>                     |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_danger_icon</strong></p><p>sds-color(white)</p>                     |
|                                        |                                                                                                   |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_danger_interactive_background</strong></p><p>sds-color(red, 60)</p> |
| --sds\_button\_interactive\_border     | <p><strong>--sds_theme_button_danger_interactive_border</strong></p><p>sds-color(red, 60)</p>     |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_danger_interactive_text</strong></p><p>sds-color(white)</p>         |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_danger_interactive_icon</strong></p><p>sds-color(white)</p>         |

## .sds\_Button\_Type\_DangerAlt

|                                        |                                                                                                                                                                                     |
| -------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| --sds\_button\_background              | <p><strong>--sds_theme_button_danger_alt_background</strong></p><p>linear-gradient( </p><p>  to bottom, </p><p>  sds-color(white) 0%,</p><p>  sds-color(grey, 05) 100% </p><p>)</p> |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_sdanger_alt_border</strong></p><p>sds-color(grey, 30)</p>                                                                                             |
| --sds\_button\_text                    | <p><strong>--sds_theme_button_danger_alt_text</strong></p><p>sds-color(red, 60)</p>                                                                                                 |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_danger_alt_icon</strong></p><p>sds-color(red)</p>                                                                                                     |
|                                        |                                                                                                                                                                                     |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_danger_alt_interactive_background</strong></p><p>sds-color(red, 60)</p>                                                                               |
| --sds\_button\_interactive\_border     | <p><strong>--sds_theme_button_danger_alt_interactive_border</strong></p><p>sds-color(red, 60)</p>                                                                                   |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_danger_alt_interactive_text</strong></p><p>sds-color(white)</p>                                                                                       |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_danger_alt_interactive_icon</strong></p><p>sds-color(white)</p>                                                                                       |

## .sds\_Button\_Type\_Ghost

|                                        |                                                                                                   |
| -------------------------------------- | ------------------------------------------------------------------------------------------------- |
| --sds\_button\_background              | <p><strong>--sds_theme_button_ghost_background</strong></p><p>#ffffff00</p>                       |
| -sds\_button\_border                   | <p><strong>--sds_theme_button_ghost_border</strong></p><p>none</p>                                |
| --sds\_button\_text                    | <p><strong>--sds_theme_button_ghost_text</strong></p><p>sds-color(grey, 100)</p>                  |
| --sds\_button\_icon                    | <p><strong>--sds_theme_button_ghost_icon</strong></p><p>sds-color(grey, 70)</p>                   |
|                                        |                                                                                                   |
| --sds\_button\_interactive\_background | <p><strong>--sds_theme_button_ghost_interactive_background</strong></p><p>sds-color(grey, 20)</p> |
| --sds\_button\_interactive\_text       | <p><strong>--sds_theme_button_ghost_interactive_text</strong></p><p>sds-color(grey, 100)</p>      |
| --sds\_button\_interactive\_icon       | <p><strong>--sds_theme_button_ghost_interactive_icon</strong></p><p>sds-color(grey, 100)</p>      |

