BlankButton / Dev

Install

yarn add @ntds/button

import { BlankButton } from '@ntds/button';

Prop	Type & Description
id	string Standard HTML-element id
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
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.
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
render	(props: Omit<BaseButtonProps, "hoverAffordance" \| "render" \| "elementRef" \| "type" \| "tw">) => Element Hook into the top render method of the wrapping element
children	ReactNode Any valid ReactNode(s)