Warp Design System

Appearance

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.

AndroidreleasedElementsreleasediOSreleasedReactreleasedVuereleased

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 ​

NameTypeDefaultSummary
can-closebooleanfalseWhether the pill should be removable via a close button.
close-aria-labelstring-Label read by screen readers when targeting the close button.
close-sr-labelstring-Deprecated: Used "close-arial-label" instead.
open-aria-labelstring-Label read by screen readers when targeting the pill.
open-sr-labelstring-Deprecated: Used "open-arial-label" instead.
suggestionbooleanfalseWhether 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
  • Default: -

close-sr-label ​

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

  • Type: string
  • Default: -

open-aria-label ​

Label read by screen readers when targeting the pill.

  • Type: string
  • Default: -

open-sr-label ​

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

  • Type: string
  • 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

Questions? ​

Feel free to ask any questions on usage in the Warp DS Slack channel: #warp-design-system