Active theme set to Nord LightNord DarkVet LightVet DarkHealth LightHealth Dark and saved in preferences.
Copied to clipboard.
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.

Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
Edit in CodePen Open in new window
<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

PropertyAttributeDescriptionTypeDefault
variantvariantThe style variant of the button."default" | "primary" | "dashed" | "plain""default"
typetypeThe type of the button."button" | "submit" | "reset""submit"
sizesizeThe size of the button. This affects font-size and padding."s" | "m""m"
hrefhrefWhen provided, renders the button as a link, with it's href attribute set to the given value.string | undefinedundefined
downloaddownloadWhen provided together with a href property, the button will trigger a file download instead of a page visit.booleanfalse
expandexpandControls whether the button expands to fill the width of its container.booleanfalse
disableddisabledMakes the input component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.booleanfalse
namenameThe name of the input component.string | undefinedundefined
valuevalueThe value of the input component.string | undefinedundefined

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 nameDescription
Default slotThe button content
beforeUsed to place content before button text. Typically used for icons.
afterUsed to place content after button text. Typically used for icons.