Button

Triggers an action, submits a form, or navigates to another location.

html

<noora-button type="button">Create project</noora-button>

Attributes

Attribute	Type or allowed values	Default	Description
`aria-describedby`	`string`	None	Identifies the element that describes the button.
`aria-label`	`string`	None	Provides an accessible name when visible text is unavailable.
`aria-labelledby`	`string`	None	Identifies the element that labels the button.
`title`	`string`	None	Provides advisory information for the button.
`autofocus`	`boolean`	`false`	Focuses the button when the page loads.
`disabled`	`boolean`	`false`	Prevents activation and form submission.
`download`	`string`	None	Downloads the linked resource, optionally using this value as the filename.
`form`	`string`	None	Associates the button with a form by element identifier.
`formaction`	`string`	None	Overrides the associated form action for this submit button.
`formenctype`	`string`	None	Overrides the associated form encoding type for this submit button.
`formmethod`	`string`	None	Overrides the associated form method for this submit button.
`formnovalidate`	`boolean`	`false`	Skips validation when this button submits its associated form.
`formtarget`	`string`	None	Overrides where the associated form response is displayed.
`href`	`string`	`""`	Renders the control as a link to this location.
`icon-only`	`boolean`	`false`	Uses the default slot as the entire button content. An accessible label is required.
`label`	`string`	`""`	Provides fallback text when the default slot is empty.
`name`	`string`	`""`	Sets the form field name submitted with the button value.
`rel`	`string`	None	Sets the relationship between the current page and a linked resource.
`size`	`small`, `medium`, `large`	`"large"`	Controls the button dimensions and text size.
`target`	`string`	None	Controls where a linked resource is opened.
`type`	`button`, `reset`, `submit`	`"submit"`	Controls native button behavior when href is absent.
`value`	`string`	`""`	Sets the form value submitted with the button name.
`variant`	`primary`, `secondary`, `destructive`	`"primary"`	Controls the visual emphasis and semantic intent.

Read-only properties

Property	Type	Description
`control`	`HTMLAnchorElement \| HTMLButtonElement \| null`	The native link or button rendered inside the component.
`form`	`HTMLFormElement \| null`	The form associated with the button, if one exists.

Slots

Slot	Description
`default`	The visible label, or the complete content when icon-only is present.
`icon-left`	An icon displayed before the label.
`icon-right`	An icon displayed after the label.

Styling parts

Part	Description
`control`	The native link or button control.

Use the standard ::part() selector when an application needs a targeted override:

css

noora-button::part(control) {
  inline-size: 100%;
}

The component emits the standard browser click event.

It renders a native link when href is present and the component is enabled. Otherwise, it renders a native button and supports form submission and reset.

Variants

Choose a semantic variant through the variant attribute.

html

<noora-button type="button" variant="primary">Primary</noora-button>
<noora-button type="button" variant="secondary">Secondary</noora-button>
<noora-button type="button" variant="destructive">Destructive</noora-button>

Sizes

Compare the large, medium, and small button sizes.

html

<noora-button type="button" size="large">Large</noora-button>
<noora-button type="button" size="medium">Medium</noora-button>
<noora-button type="button" size="small">Small</noora-button>

Disabled

Compare the disabled state across every button variant.

html

<noora-button type="button" variant="primary" disabled>Disabled</noora-button>
<noora-button type="button" variant="secondary" disabled>Disabled</noora-button>
<noora-button type="button" variant="destructive" disabled>Disabled</noora-button>

Icons

Place a chevron on the left, right, or both sides of the label, or render an icon-only button.

html

<noora-button type="button">
  <noora-icon slot="icon-left" name="chevron_left"></noora-icon>
  Icon
</noora-button>

<noora-button type="button">
  Icon
  <noora-icon slot="icon-right" name="chevron_right"></noora-icon>
</noora-button>

<noora-button type="button">
  <noora-icon slot="icon-left" name="chevron_left"></noora-icon>
  Icon
  <noora-icon slot="icon-right" name="chevron_right"></noora-icon>
</noora-button>

<noora-button type="button" icon-only aria-label="Previous">
  <noora-icon name="chevron_left"></noora-icon>
</noora-button>