Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Button

v.1.0.0 | Saturn

Usage

The name of the tokens object to style the button component is BUTTON_STYLES.

You cannot change the name of the tokens object.

There are two props that allow to modify different aspects of the component:

  • Variant: modify the general styles of the button.
  • Size: modify the sizes styles of the button.

Variants

Variants can modify the styles for each inner state of the button. The inner states are:

1234567
enum ButtonStateType {
  PRESSED
  LOADING
  DEFAULT
  DISABLED
  HOVER
}

For each inner state the next tokens can be used:

12345678
const BUTTON_STYLES = {
  [VARIANT]:{
    [STATE]: CommonStyleType && TypographyTypes && {
      altVariant?: boolean;
      icon?: IconTypes;
    }
  }
}

Sizes

For each size the next tokens can be used:

12345
const BUTTON_STYLES = {
  [SIZE]: PaddingTypes && TypographyTypes && {
    icon?: IconTypes;
  }
}

Example

button theme object example:

12345678910
const BUTTON_STYLES = {
  [SIZE]: {
    padding_top: 'padding',
    padding_bottom: 'padding',
  },
  [VARIANT]: {
    [STATE]: {
      background_color: 'color',
      border_color: 'color',
      icon: {
ButtonCode API
ButtonAccessibility