Pills are used to represent a discrete piece of information (e.g. email address, username, role name) that the user can interact with, often in an input or a list format.

• When you want to add/remove discrete items to a list
• When you need to apply dynamic filters
• When you want to display tags or labels on an item

• When you need multiple interactions for a single entity, consider a card or a tile
• When you need to display long explanatory text, consider using a caption

• Avoid mixing and matching colors unless the different color of the pill conveys important meaning about the data inside
• If including an icon on the left-hand side, make certain the icon is consistent for all data in the same category. As an example, when including a mail icon next to an email address, all pills with email addresses should include the mail icon.
• If mixing interactive and informative pills, organize these into a list in the page hierarchy

• Text should generally be 1-2 words long and reflect a discrete name for the data; avoid sentences.
• Text should not be wrapped inside the pill. Set a max-width on the pill or pill container element to truncate long text with an ellipsis.

In general, pills should use the base size. The small size should only be used when there is limited space on compact displays.

The dismissible attribute makes pills interactive with a close button. These pills are semantically buttons that can be activated by clicking or keyboard interaction. When dismissed, they fire the pharos-pill-dismissed event.

The preset attribute controls the color styles of the pill. There are nine preset options available, which can be used to categorize or differentiate pills. Preset 1 is the default style.

The icon-left attribute adds a Pharos icon to the left side of the pill content. Use this to further categorize the type of pill being displayed. Make certain the icon is consistent for all data in the same category.

The disabled attribute should only be used with dismissible pills. Use this state when a dismissible pill cannot be interacted with at the current time.

• Interactive pills (dismissible) are semantically buttons that have focus applied to the entire pill
• Informative pills are div elements that do not receive focus, as they are not interactive
• Variants use predefined color schemes that meet contrast requirements

• Always pair error states with an icon to rely on more than color alone to signify errors
• Ensure color choices convey meaning consistently across the interface, not just aesthetic variety

• For dismissible pills, clicking any part of it will remove it. Ensure that focus is properly managed after removing elements that were previously in focus (e.g., move focus to the logically next element or to start of section)
• When grouping pills, organize them in a list to convey their discrete nature to assistive technologies

• Informational pills are read as regular text content: "[pill text]"
• Dismissible pills are read as: "Dismiss [pill text], button"

• Tab: Moves focus to the next dismissible pill (informational pills are not focusable)
• Enter or Space: Dismisses the focused pill and fires the pharos-pill-dismissed event

• 1.3.1 Info and Relationships A
• 1.4.1 Use of Color A
• 2.5.8 Target Size (Minimum) AA
• 4.1.2 Name, Role, Value A