We’re hiring for design systems team! View open positions.
Button draft
Buttons are used for interface actions. Primary style should be used only once per view for main call-to-action.
<nord-stack direction="horizontal" gap="s">
<nord-button href="#" variant="primary">Primary</nord-button>
<nord-button href="#">Default</nord-button>
<nord-button href="#" variant="dashed">Dashed</nord-button>
<nord-button href="#" variant="plain">Plain</nord-button>
</nord-stack>Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
variant | variant | The style variant of the button. | "default" | "primary" | "dashed" | "plain" | "default" |
type | type | The type of the button. | "button" | "submit" | "reset" | "submit" |
size | size | The size of the button. This affects font-size and padding. | "s" | "m" | "m" |
href | href | When provided, renders the button as a link, with it's href attribute set to the given value. | string | undefined | undefined |
download | download | When provided together with a href property, the button will trigger a file download instead of a page visit. | boolean | false |
expand | expand | Controls whether the button expands to fill the width of its container. | boolean | false |
disabled | disabled | Makes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies. | boolean | false |
name | name | The name of the input component. | string | undefined | undefined |
value | value | The value of the input component. | string | undefined | undefined |
Methods
focus(options?: FocusOptions) => void
Programmatically move focus to the component
options- An object which controls aspects of the focusing process.
blur() => void
Programmatically remove focus from the component.
click() => void
Programmatically simulates a click on the component.
Slots
| Slot name | Description |
|---|---|
| Default slot | The button content |
before | Used to place content before button text. Typically used for icons. |
after | Used to place content after button text. Typically used for icons. |