Pill
Pills are small, rounded elements used for displaying brief information like tags, status, or categories. They are typically colorful, making them stand out on the page.
Pills can be interactive, allowing users to perform actions like filtering content or removing tags. Their compact size makes them ideal for adding metadata to content without taking up much space.
Examples
Various examples showcasing different configurations of the component
Examples
Pill
Property
Value
Children
Pill
Colors
Pill
Property
Value
Color
BLUE
Text
Pill
Variants
Pill
Property
Value
Children
Pill
Variant
DARK
Color
MEADOW_GREEN
Icons
Pill
Property
Value
Children
Pill
Variant
DARK
Color
MEADOW_GREEN
Prefix icon
Search
Suffix icon
Cancel
Properties
Each component can be customized and configured based on product requirements. You can modify the component on Canonic by clicking on the component and opening the configuration panel.
Property
Description
Default Value
Type
Text
The content to be displayed within the pill.
String
Class name
Additional CSS class to apply.
String
Color
The color of the pill.
Brand
String
Variant
The variant of the pill.
Dark
String
Size
The size of the pill.
Large
String
Prefix icon
Prefix icon.
Icon
Suffix icon
Suffix icon.
Icon
Triggers
Components expose certain events such as clicking. You can use these events to perform actions such as navigation, fetching data and controlling other components. The events exposed by this component are listed below.
Property
Description
On prefix click
Function to be called when the prefix icon is clicked.
On suffix click
Function to be called when the suffix icon is clicked.
On click
Handler called when the pill is clicked.