## Examples

### Primary

<elements-example>

```html
<w-button variant="primary">Publish</w-button>
```

</elements-example>

### Secondary

<elements-example>

```html
<w-button variant="secondary">Cancel</w-button>
```

</elements-example>

### Negative

<elements-example>

```html
<w-button variant="negative">Delete</w-button>
```

</elements-example>

### Utility

<elements-example>

```html
<w-button variant="utility">Filter</w-button>
```

</elements-example>

### Quiet

<elements-example>

```html
<w-button variant="quiet">Skip</w-button>
```

</elements-example>

### Icon Only

<elements-example>

```html
<w-button variant="pill" icon-only>
  <w-icon name="Close"></w-icon>
  <span class="sr-only">Close</span>
</w-button>
```

</elements-example>

### Small

<elements-example>

```html
<w-button variant="primary" small>Save</w-button>
```

</elements-example>

### Full Width

<elements-example>

```html
<w-button variant="primary" full-width>Continue</w-button>
```

</elements-example>

### Loading

<elements-example>

```html
<w-button variant="primary" loading>Saving</w-button>
```

</elements-example>

### Link Styled As Button

<elements-example>

```html
<w-button href="/messages/new" variant="primary">New message</w-button>
```

</elements-example>

### External Link

<elements-example>

```html
<w-button href="https://example.com" target="_blank">Visit example</w-button>
```

</elements-example>

### Form Actions

<elements-example>

```html
<form>
  <w-button type="submit" name="intent" value="save">Save</w-button>
  <w-button type="reset">Reset</w-button>
</form>
```

</elements-example>
