readme.md

---
title: Button
sidebar: true
---

# Button

Well, it's a button.

## Usage

### Primary (Default) button

<hy-docs-container>
  <hy-button>Primary</hy-button>
</hy-docs-container>

```
<hy-button>Primary</hy-button>
```

### Secondary & Transparent

<hy-button variant="secondary">Secondary</hy-button>

```
<hy-button variant="secondary">Secondary</hy-button>
```

### Primary button, state disabled

<hy-button state="disabled">Primary</hy-button>

```
<hy-button state="disabled">Primary</hy-button>
```

### Secondary button, state disabled

<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>

```
<hy-button state="disabled" variant="secondary">Secondary Disabled</hy-button>
```

### With arrows, state enabled

<hy-button icon="hy-icon-arrow-left">Primary</hy-button>

```
<hy-button icon="hy-icon-arrow-left">Primary</hy-button>
```

<hy-button variant="secondary" icon="hy-icon-arrow-left">Secondary</hy-button>

```
<hy-button variant="secondary" icon="hy-icon-arrow-left">
    Secondary
</hy-button>
```

<hy-button icon-right="hy-icon-arrow-right">Primary</hy-button>

```
<hy-button icon-right="hy-icon-arrow-right">
    Primary
</hy-button>
```

<hy-button icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>

```
<hy-button icon-right="hy-icon-arrow-right" variant="secondary">
    Secondary
</hy-button>
```

### With arrows, state disabled

<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>

```
<hy-button state="disabled" icon="hy-icon-arrow-left">Primary</hy-button>
```

<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>

```
<hy-button variant="secondary" state="disabled" icon="hy-icon-arrow-left">Secondary</hy-button>
```

<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>

```
<hy-button state="disabled" icon-right="hy-icon-arrow-right">Primary</hy-button>
```

<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>

```
<hy-button state="disabled" icon-right="hy-icon-arrow-right" variant="secondary">Secondary</hy-button>
```

### Mix with any icon

<hy-docs-container>
<hy-row>
<hy-button variant="secondary" icon="hy-icon-hy-logo">I'm HY brand concious!</hy-button>
<hy-button icon="hy-icon-camera">Taking some pictures</hy-button>
<hy-button icon="hy-icon-arrow-left" icon-right="hy-icon-image-gallery">Icons on both sides!</hy-button>
</hy-row>
</hy-docs-container>

```
<hy-row>
  <hy-button variant="secondary" icon="hy-icon-hy-logo">I'm HY brand concious!</hy-button>
  <hy-button icon="hy-icon-camera">Taking some pictures</hy-button>
  <hy-button icon="hy-icon-arrow-left" icon-right="hy-icon-image-gallery">On both sides!</hy-button>
</hy-row>
```

<!-- Auto Generated Below -->

## Properties

| Property        | Attribute        | Description                                                                              | Type                       | Default     |
| --------------- | ---------------- | ---------------------------------------------------------------------------------------- | -------------------------- | ----------- |
| `ariaLabel`     | `aria-label`     | Aria label for the element                                                               | `string`                   | `undefined` |
| `buttonClasses` | `button-classes` | Custom classes added to button element.                                                  | `string`                   | `''`        |
| `buttonType`    | `button-type`    | Button type. Defaults to submit.                                                         | `string`                   | `'submit'`  |
| `disabled`      | `disabled`       | Use this to programmatically disable the button, matches the native button functionality | `boolean`                  | `false`     |
| `icon`          | `icon`           | Icon to use on the left side                                                             | `string`                   | `undefined` |
| `iconRight`     | `icon-right`     | Icon to use on the right side                                                            | `string`                   | `undefined` |
| `isExternal`    | `is-external`    | Use only with url property. Sets the                                                     | `boolean`                  | `false`     |
| `size`          | `size`           | Size (height) of the button. Normal: 44px, large: 48px                                   | `"large" \| "normal"`      | `'normal'`  |
| `state`         | `state`          | deprecated, use disabled boolean value                                                   | `"disabled" \| "enabled"`  | `'enabled'` |
| `url`           | `url`            | Set this on if an anchor tag is required instead of a button.                            | `string`                   | `''`        |
| `variant`       | `variant`        | The element variant. Defaults to primary                                                 | `"primary" \| "secondary"` | `'primary'` |

## Dependencies

### Depends on

- [hy-icon](../icon)

### Graph

```mermaid
graph TD;
  hy-button --> hy-icon
  style hy-button fill:#f9f,stroke:#333,stroke-width:4px
```

---

Helsinki University Design System