Anatomy
- Container
- Prefix Slot (Optional)
- Label
Default
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-medium | |
| Padding (Top and Bottom) | push-button-padding-y-medium | |
| Border Width | push-button-border-width | |
| Border Radius | push-button-radius | |
| Background Color | push-button-color-background-unselected-default | |
| Border Color | push-button-color-border-unselected-default | |
| Border Radius | push-button-radius | |
| Label | ||
| Font Family | font-control-body-1-font-family | |
| Font Size | font-control-body-1-font-size | |
| Font Weight | font-control-body-1-font-weight | |
| Line Height | font-control-body-1-line-height | |
| Letter Spacing | font-control-body-1-letter-spacing | |
| Text Color | push-button-color-text-unselected-default | |
| Prefix | ||
| Fill Color | push-button-prefix-color-fill-unselected-default | |
| Dimension | push-button-prefix-dimension | |
| Margin (Right) | push-button-prefix-margin-right |
Selection
Selected
Default
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Background Color | push-button-color-background-selected-default | |
| Border Color | push-button-color-border-selected-default | |
| Label | ||
| Text Color | push-button-color-text-selected | |
| Prefix | ||
| Fill Color | push-button-prefix-color-fill-selected |
Hover
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Background Color | push-button-color-background-selected-hover | |
| Border Color | push-button-color-border-selected-hover |
Disabled
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Opacity | opacity-disabled |
Unselected
Default
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Background Color | push-button-color-background-unselected-default | |
| Border Color | push-button-color-border-unselected-default | |
| Label | ||
| Text Color | push-button-color-text-unselected-default | |
| Prefix | ||
| Fill Color | push-button-prefix-color-fill-unselected-default |
Hover
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Background Color | push-button-color-background-unselected-hover | |
| Border Color | push-button-color-border-unselected-hover |
Disabled
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Opacity | opacity-disabled |
Sizes
Small
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-small | |
| Padding (Top and Bottom) | push-button-padding-y-small |
Medium
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-medium | |
| Padding (Top and Bottom) | push-button-padding-y-medium |
Large
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-large | |
| Padding (Top and Bottom) | push-button-padding-y-large |
Icon Only
Small
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-small-icon-only | |
| Padding (Top and Bottom) | push-button-padding-y-small-icon-only |
Medium
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-medium-icon-only | |
| Padding (Top and Bottom) | push-button-padding-y-medium-icon-only |
Large
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Padding (Left and Right) | push-button-padding-x-large-icon-only | |
| Padding (Top and Bottom) | push-button-padding-y-large-icon-only |
Focus
| Attribute | Token | Value |
|---|---|---|
| Container | ||
| Outline Offset | spacing-focus-default | |
| Outline | color-border-focus-default |