---
url: /docs/components/pill/frameworks/elements.md
---
# Pill - Elements

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.

## Accessibility

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

## Usage

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

## Examples

### Closable

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

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

### Suggestion

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

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