ChildrenWithIcon / Dev

Install

yarn add @ntds/button

Import

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

Usage with `ref`

There are two ways to use refs in this component depending on if you provide a custom tag or not (see the previous section). Use the elementRef-prop for all cases where you do not provide a custom tag. When you do pass a custom tag, simply use the ref directly on the custom component/tag in the render-method as shown in the following example:

👨‍💻 Override the tag of the component

All button components defaults to a <button>-tag. However, it's common to change this to an <a>-tag (anchor-tag) for semantic purposes or use a third party component like the <Link />-component from react-router-dom. In any case, this is accomplished by using the render-prop. Like shown in the code example below. All props -- including the children -- gets past down as an argument, making it easy to spoon-feed props to your custom component.

Props

Prop	Type & 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 Default value: "false" Makes the button fill the parents available space
grouped	boolean Default value: "false" 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 Default value: "false" 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 Default value: "ButtonSize.Medium" 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">) => Element Hook into the top render method of the wrapping element
children	ReactNode Any valid ReactNode(s)

ChildrenWithIcon / Dev

Install

Import

Usage with ref

👨‍💻 Override the tag of the component

Props

Usage with `ref`