<!-- Generated by scripts/generate-web-components.js. Do not edit directly. -->

# 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>
```
