Norsk Tipping Design System

Button

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:

import { useRef } from 'react';

function MyComponent() {
  const buttonRef = useRef();
  const anchorRef = useRef();
  
  return (
    <>
      <Button 
        elementRef={buttonRef /* 👈 */}
      >
        A button
      </Button>
      
      <Button
        render={(props) => (
          <a 
            ref={anchorRef /* 👈 normal usage of ref */}
            href='/bar/baz' 
            {...props} 
          />
        )}>
        A link
      </Button>
    </>
  )
}

👨‍💻 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.

import { Link } from 'react-router-dom';

// With react router
<Button
  render={(props) => (
    <Link to='/bar/baz' {...props} /* 👉 props includes children */ />
  )}
>
  RouterLink
</Button>

<Button
  render={(props) => (
    <a href='/some/link' {...props} /* 👉 props includes children */ />
  )}
>
  PlainLink
</Button>

Props

PropTypeDefaultDescription
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?booleanfalseMakes the button fill the parents available space
grouped?booleanfalseOptimize 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?booleanfalsePlace 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?ButtonSizesButtonSize.MediumChanges 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)

On this page

InstallImportUsage with ref👨‍💻 Override the tag of the componentProps