Buttons
Normal Button
This is the default button that should be used.
Example:
Ghost Button
Ghost buttons can be used as a secondary option or to overlay on splash images. Ghost buttons can have their color overwritten by using the ghostColor prop.
Example:
Danger Button
Use the danger prop to signify a destructive action (the color is set in the theme).
Example:
Invisible Button
Only use invisible buttons in combination with other buttons (i.e. in a ButtonGroup). Do NOT use them by themselves as this can be confusing.
Example:
Buttons will adjust their width to their content by default. To force them to use their space, add the fullWidth prop.
Icon Button
Example:
Invisible Icon Button
Example:
Button Group
If you are using more than one button, you should use a ButtonGroup to contain them
Example:
Button Group Vertical
If you are using more than one button, you should use a ButtonGroup to contain them
Example:
Guidance
| Do | Don't |
|---|---|
| Use button group if using more than one button | Don't use invisible buttons on their own |
| Use invisible buttons along with normal buttons | Don't use icon buttons for dangerous actions |
| Use danger buttons to indicate dangerous actions | Don't use normal buttons for dangerous actions |
| Use ghost buttons to overlay splash images | test |