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     |
| ----------- | ------------ | ----------- | -------------------------- | ----------- |
| `icon`      | `icon`       |             | `string`                   | `undefined` |
| `iconRight` | `icon-right` |             | `string`                   | `undefined` |
| `state`     | `state`      |             | `"disabled" \| "enabled"`  | `"enabled"` |
| `variant`   | `variant`    |             | `"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