The Button component can be used to trigger an action, such as submitting a form, opening a modal, and more.
The custom
appearance is available for the cases where you might want to fully customize the appearance of the button.
The default styles are mainly structural. Intent colors are applied as color
.
Sometimes a button element is not ideal for a given case, but the same styles are still desired.
Frontile provides the option to disable rendering the button
element, but instead it yields back an object with
the class names it would use.
You can compose appearance with intents and more to create the button that best fits your needs.
You can also use TailwindCSS classes to customize even further.
Here is another example using TailwindCSS classes with the custom
appearance.
Arg | Type | Description | Required | Default |
---|---|---|---|---|
appearance
|
'default' | 'outlined' | 'minimal' | 'custom'
|
The button appearance | - |
'default'
|
intent
|
'primary' | 'success' | 'warning' | 'danger'
|
The intent of the button | - | - |
isRenderless
|
boolean
|
Disable rendering the button element. It yields an object with classNames instead. | - | - |
size
|
'xs' | 'sm' | 'lg' | 'xl'
|
The size of the button | - | - |
type
|
'button' | 'submit' | 'reset'
|
The HTML type of the button | - |
'button'
|