BlankButton
Install
yarn add @ntds/buttonImport
import { BlankButton } from '@ntds/button';Props
| Prop | Type | Default | Description |
|---|---|---|---|
id? | string | — | Standard HTML-element id |
title? | string | — | Standard HTML-title attribute |
type? | "button" | "submit" | "reset" | — | Default behavior of the standard HTML-button. Note: Will be omitted when using the `render-prop`. |
disabled? | boolean | — | Disables the button both visually and interactively |
tabIndex? | 0 | -1 | — | Standard HTML-tabIndex `-1` = not focusable `0` = focusable, natural order |
elementRef? | Ref<HTMLButtonElement> | — | Get the DOM-reference from the button-element |
onClick? | MouseEventHandler<HTMLElement> | — | Standard click event |
hoverAffordance? | "md" | "lg" | "xl" | — | Whether or not to show hover-effect. Has no effect when flat is set to true. |
className? | string | — | Can be styled as a "plain" element Note! Keep in mind that the focus styles will get mixed with classes you give here Also, same goes for the hover style (ntds-hover-grow-*) if you use the `hoverAffordance` prop |
twRounded? | string | — | Provide custom value for rounded corners Uses `rounded-md` to have nicer focused state. Exmaple of custom value: `rounded-full` |
twFocusKeyboard? | string | — | Override the standard keyboard focus style of the blank button Default: focus-keyboard:ring-6 focus-keyboard:ring-blue-400 |
children? | ReactNode | — | Any valid ReactNode(s) |
render? | (props) => ReactNode | — | Hook into the top render method of the wrapping element |