Nordnet Design System
Getting StartedPlayground 🎮
Components
ButtonPropertiesBasic usageColorsCssGrid
Components/Input

Button

Buttons make common actions more obvious and help users more easily perform them. Buttons use labels and sometimes icons to communicate the action that will occur when the user touches them.

Best practices

  • Group buttons logically into sets based on usage and importance.
  • Ensure that button actions are clear and consistent.
  • The main action of a group set can be a primary button.
  • Select a single button variation and do not mix them.

Properties

variant
"primary" | "secondary" | "neutral" | undefined
size
"s" | "m" | "l" | undefined
fullWidth
Boolean | undefined
color
Colorfn | undefined
className
String | undefined
disabled
Boolean | undefined
onClick
((e: mouseevent<element, mouseevent>) => void) | undefined
type
"button" | "reset" | "submit" | undefined
to
Any
rel
String | undefined
colorFn
Colorfn | undefined

Basic usage