# Pill (w-pill)

## Description

Pill is a type of button that is often used as a filter, but can also be used as a rounded button for overlays, etc.

[Warp component reference](https://warp-ds.github.io/docs/components/pill/frameworks/elements)

## Usage

<elements-example>

```html
<w-pill>Filter</w-pill>
```

</elements-example>

## Accessibility

Pills are designed to show active filters. By default they include generic accessible labels, but you can override these with your own.

## Examples

### Closable

For example to dismiss or turn off parts of a filter.

<elements-example>

```html
<w-pill can-close>Filter</w-pill>
```

</elements-example>


### Suggestion

<elements-example>

```html
<w-pill suggestion>Suggestion</w-pill>
```

</elements-example>

## Styling API

## `<w-pill>` API

Unless otherwise noted all properties are HTML attributes (as opposed to JavaScript object properties).

### Properties

| Name | Type | Default | Summary |
|-|-|-|-|
| can-close | `boolean` | `false` | Whether the pill should be removable via a close button. |
| close-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the close button. |
| close-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "close-arial-label" instead. |
| open-aria-label | `string \| undefined` | `-` | Label read by screen readers when targeting the pill. |
| open-sr-label | `string \| undefined` | `-` | **Deprecated**: Used "open-arial-label" instead. |
| suggestion | `boolean` | `false` | Whether the pill should be rendered as a suggestion. |

### Property Details

#### can-close

Whether the pill should be removable via a close button.

- Type: `boolean`
- Default: `false`

#### close-aria-label

Label read by screen readers when targeting the close button.

- Type: `string | undefined`
- Default: `-`

#### close-sr-label

**Deprecated**: Used "close-arial-label" instead.



- Type: `string | undefined`
- Default: `-`

#### open-aria-label

Label read by screen readers when targeting the pill.

- Type: `string | undefined`
- Default: `-`

#### open-sr-label

**Deprecated**: Used "open-arial-label" instead.



- Type: `string | undefined`
- Default: `-`

#### suggestion

Whether the pill should be rendered as a suggestion.

- Type: `boolean`
- Default: `false`

### Events

#### w-pill-click

Fires when the pill itself is clicked.

- Type: `CustomEvent`
#### w-pill-close

Fires when the pill's close button is clicked.

- Type: `CustomEvent`