Pill

A basic component to represent a Pill. These come in multiple variants, and are interactable/clickable if required.

Component render

<Pill
  onClick={() => console.log("Pill clicked")}
  variant="success"
>
  Success
</Pill>

Properties

Property	Type	Description
children	string	The text to display in the pill.
indicator	boolean	Controls whether the pill should display an indicator icon.
interactive	boolean	Controls whether the pill should react to hovers/clicks. It is recommended to only set this to true if you have also slotted an icon into the pill.
label	string	The label for the textarea, which will appear right above the text area.
onClick	() => void	This event listener runs when the interactive pill is clicked.
role	string	Controls the role attribute on the host.
size	"small" "medium"	String for setting pill size.
variant	"emphasis" "success" "warning" "critical" "normal" "insight" "alpha" "beta"	Sets the visual variant style for the pill.