children | ReactNode | — | Usually simple text, but can be anything. |
main? | boolean | — | Set this to add bold style for main button. |
id? | string | — | Standard HTML-element id |
title? | string | — | Standard HTML-title attribute |
tabIndex? | 0 | -1 | — | Standard HTML-tabIndex
`-1` = not focusable
`0` = focusable, natural order |
type? | "button" | "submit" | "reset" | — | Default behavior of the standard HTML-button.
Note: Will be omitted when using the `render-prop`. |
noPill? | boolean | — | Shape of button will be a square with rounded corners instead of a pill |
disabled? | boolean | — | Disables the button both visually and interactively |
onClick? | MouseEventHandler<HTMLElement> | — | Standard click event |
fluid? | boolean | — | Makes the button fill the parents available space |
grouped? | boolean | — | Optimize the button to be displayed in a group/cluster
with other buttons.
- Sets the font-weight to medium (instead of bold)
- `fluid` defaults to true |
render? | (props) => ReactNode | — | Hook into the top render method of the wrapping element |
elementRef? | Ref<HTMLButtonElement> | — | Get the DOM-reference from the button-element |
iconLeft? | ComponentType<IconProps> | — | Icon to be displayed on the LEFT side of the content
Note: Use IconButton when the button has no other content |
iconRight? | ComponentType<IconProps> | — | Icon to be displayed on the RIGHT side of the content
Note: Use IconButton when the button has no other content |
iconSpaceBetween? | boolean | — | Place the content and the icon at the start and end
of the button by (justify-between)
Example:
```
iconSpaceBetween=false (default)
[ Content 👋 ]
iconSpaceBetween=true
[Content 👋]
``` |
busy? | boolean | — | Sets the button in a busy/working mode that prevents clicks
(via disable) and activates visual cues like changing the
cursor and deactivates the hover-effect. |
busyLabel? | string | — | Add a visible label alongside the busy spinner |
busyShowLabel? | boolean | — | Whether or not to show the label alongside the busy spinner or
just announce it to the screen reader |
tw? | TwGroupKeys | — | Tailwind overrides |
size? | ButtonSizes | — | Changes the appearance of the button including spacing and text. There are four sizes:
- Small (`sm`)
- Medium (`md`) (the default)
- Responsive (`responsive`)
- Large (`lg`)
The `responsive` size will be the same as the medium/base (`md`) button
on smaller screens and the large (`lg`) button on bigger screens. |