NeutralButton

Provides a low-emphasis compact control.

html

<noora-neutral-button aria-label="Previous page"><noora-icon name="chevron_left"></noora-icon></noora-neutral-button>

Attributes

Attribute	Type or allowed values	Default	Description
`size`	`small`, `medium`, `large`	`"large"`	Controls the dimensions.
`href`	`string`	None	Renders a native link to this location.
`disabled`	`boolean`	`false`	Disables activation.
`aria-label`	`string`	None	Provides an accessible name.

Slots

Slot	Description
`default`	The complete control content.

Styling parts

Part	Description
`control`	The native link or button.

Sizes

Use small, medium, or large compact controls.

html

<noora-neutral-button size="small" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="large" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>

States

Compare enabled and disabled controls.

html

<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next" disabled><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>

Different icons

Use the icon that matches the navigation direction.

html

<noora-neutral-button size="medium" aria-label="Previous"><noora-icon name="chevron_left"></noora-icon></noora-neutral-button>
<noora-neutral-button size="medium" aria-label="Next"><noora-icon name="chevron_right"></noora-icon></noora-neutral-button>