info

This documentation is for the 1.1.0-beta.x version of Developer portal. For previous versions, refer to 1.0.0-beta.x docs.

Button

Copy
Copied
<Button to="#">Default</Button>
<Button to="#" color="primary">
  Color: primary
</Button>
<Button to="#" variant="outlined" color="accent">
  Variant: Outlined + Color: accent
</Button>
<Button to="#" variant="outlined" color="primary">
  Variant: Outlined + Color: primary
</Button>

<Button to="#" size="small">
  size: small
</Button>
<Button to="#">
  size: regular
</Button>
<Button to="#" size="large">
  size: large
</Button>
<Button to="#" size="xlarge">
  size: xlarge
</Button>

Custom colors

You can create a custom color in theme.colors and use it for Button:

Copy
Copied
colors: {
  // ...
  acmeBrand: {
    main: 'orange'
    contrastText: '#fff'
  }
  // ...
}
Copy
Copied
<Button color="acmeBrand">
  Regular
</Button>
<Button color="acmeBrand" size="large" variant="outlined">
  Outlined large
</Button>

Props

NameTypeDefaultDescription
tostringThe URL to link to when the button is clicked.
variant'contained' | 'outlined'containedButton variant.
size'small' | 'medium' | 'large' | 'xlarge'mediumButton size
color'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error'primaryDefines color of the button, can use custom color from 'theme.colors'