readme.md

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

# Button

Something awesome!

## Usage

### 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</hy-button>
<hy-button variant="outline">I'm actually 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`              |
| `variant`   | `variant`    |             | `ButtonVariants.default \| ButtonVariants.outline \| ButtonVariants.secondary` | `ButtonVariants.default` |

## Dependencies

### Depends on

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

### Graph

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

---

HY component demo