DestructiveButton
Install
yarn add @ntds/buttonImport
import { DestructiveButton } from '@ntds/button';Custom tag and ref-usage
See base Button documentation.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
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. |
children? | ReactNode | — | Any valid ReactNode(s) |