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
<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:
colors: {
// ...
acmeBrand: {
main: 'orange'
contrastText: '#fff'
}
// ...
}
<Button color="acmeBrand">
Regular
</Button>
<Button color="acmeBrand" size="large" variant="outlined">
Outlined large
</Button>
Props
Name | Type | Description |
---|---|---|
to | string | The URL to link to when the button is clicked. |
variant | 'contained' | 'outlined' | Button variant. Default value: contained |
size | 'small' | 'medium' | 'large' | 'xlarge' | Button size Default value: medium |
color | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | Defines color of the button, can use custom color from 'theme.colors' Default value: primary |