readme.md

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

# Button

Well, it's a button.

## Usage

### Primary (Default) button

<hy-docs-container>
  <hy-button>Just a plain button</hy-button>
</hy-docs-container>

```
<hy-button>Just a plain button</hy-button>
```

### With icons

<hy-docs-container>
<hy-row>
<hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
<hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
</hy-row>
</hy-docs-container>

```
<hy-row>
  <hy-button icon="hy-icon-arrow-left">I have an icon on my left!</hy-button>
  <hy-button icon-right="hy-icon-arrow-right">I have an icon on my right!</hy-button>
</hy-row>
```

### Secondary & Outline

<hy-docs-container>
<hy-row>
<hy-button variant="secondary">I feel secondary and transparent</hy-button>
</hy-row>
</hy-docs-container>

```
<hy-row>
  <hy-button variant="secondary">I feel secondary</hy-button>
  <hy-button variant="outline">I'm actually transparent</hy-button>
</hy-row>
```

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