React implementation of the NL Design System Button component
npm install @nl-design-system-candidate/button-reactProvides the ability to perform an action.
Using npm
``shell`
npm install @nl-design-system-candidate/button-react
Using pnpm
`shell`
pnpm add @nl-design-system-candidate/button-react
Using yarn
`shell`
yarn add @nl-design-system-candidate/button-react
If you want the React component with styles
`jsx
import { Button } from '@nl-design-system-candidate/button-react/css';
;
`
If you just want the React component and import the styles separately
`jsx
import { Button } from '@nl-design-system-candidate/button-react';
;
`
Button that indicates a primary action. It is the most logical choice in a flow. Use primary buttons sparingly. Too many primary buttons on the screen can be confusing for the user. Optionally, a hint can be provided.
`jsx`
#### Primary Button with hint="positive"
Indicates a positive or successful outcome. For example, an action to create something.
`jsx`
#### Primary Button with hint="negative"
Indicates a negative or destructive result. For example, an action to permanently remove something.
`jsx`
Button that indicates a secondary action. It is often used for buttons that are an alternative to the primary action. Optionally, a hint can be provided.
`jsx`
#### Secondary Button with hint="positive"
Indicates a positive or successful outcome. For example, an action to create something.
`jsx`
#### Secondary Button with hint="negative"
Indicates a negative or destructive result. For example, an action to change the visability of something.
`jsx`
Button that isn't immediately attention-grabbing. It is often used in busy interfaces with lots of actions. Optionally, a hint can be provided.
`jsx`
#### Subtle Button with hint="positive"
Indicates a positive or successful outcome. For example, an action to create something.
`jsx`
#### Subtle Button with hint="negative"
Indicates a negative or destructive result. For example, an action to change the visability of something.
`jsx`
A button with an icon before the label. Using an SVG icon with fill="currentColor" is recommended.
`jsx`
} label="Previous" />
A button with an icon after the label. Using an SVG icon with fill="currentColor" is recommended.
`jsx`
} label="Next" />
A button with only an icon. The label is not visible, but it is present for accessibility. Using an SVG icon with fill="currentColor" is recommended.
`jsx`
} label="Get a hint" />
or even with two icons
`jsx`
} iconEnd={
A Button that indicates a pressed state, even if the user is not currently interacting with it.
Use the pressed property to indicate the visible state, and toggle when assitive software should track the current state of the button.
_Note_: We have NL Design System guidelines that warn about the use of the Disabled button for submit actions.
To make a Button inactive you can use the disabled property. This will add disabled styling and set aria-disabled="true". We do not set the native disabled property, because otherwise the Button will no longer be focussable, even with tabindex="0".
When using a Disabled Button the onClick handler can be used to ensure the button will no longer respond to clicks.
Do you really need the native disabled attribute? Use the htmlDisabled` property instead, but know it will cause accessibility issues.
All NL Design System components are white label. Use Button design tokens to ensure it matches your brand styles. https://nldesignsystem.nl/handboek/huisstijl/design-tokens/.
The tokens used for Button can be found in the tokens documentation @nl-design-system-candidate/button-tokens.
Want to use the Button with other frameworks or vanilla JavaScript? The React component is based on
@nl-design-system-candidate/button-css.
Read more about the Button in Dutch and find links to other resources like Figma and Storybook on https://nldesignsystem.nl/button.