TertiaryButton / Dev

Install

yarn add @ntds/button

Import

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

Custom tag and `ref`-usage

See base Button documentation.

Props

TertiaryButton

Prop	Type & Description
id	string Standard HTML-element id
variant	"blue" \| "haiti" \| "white" Default value: "blue" Color variant for button variants: 'blue' \| 'haiti' \| 'white' Default: 'blue'
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
elementRef	Ref<HTMLButtonElement> Get the DOM-reference from the button-element
iconLeft	React.ComponentType<IconProps> Icon to be displayed on the LEFT side of the content Note: Use IconButton when the button has no other content
iconRight	React.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.
render	(props: Omit<BaseButtonProps, "elementRef" \| "render" \| "type" \| "iconRight" \| "iconLeft" \| "iconClassName" \| "tw">) => Element Hook into the top render method of the wrapping element
children	ReactNode Any valid ReactNode(s)

TertiaryButton / Dev

Install

Import

Custom tag and ref-usage

Props

TertiaryButton

Custom tag and `ref`-usage