# Pill (fw-pill)
fw-pill displays an informational text component with icon.
Icon inside the pill must be set with attribute slot="icon"
and it could either be fw-icon
or customised with images or SVG icons as required.
# Demo
Show Code
# Styling Pills with custom icons or images
Show Code
# Styling Pills with custom CSS
Pill can be customized with custom colors by using custom CSS properties listed further below in the page.
Show Code
# Usage
# Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
color | color | Theme based on which the pill is styled. | "blue" \| "green" \| "grey" \| "red" \| "yellow" | undefined |
# CSS Custom Properties
Name | Description |
---|---|
--fw-pill-background-color | Pill background color |
--fw-pill-border | Pill border |
--fw-pill-border-radius | Pill border radius |
--fw-pill-color | Pill color |
--fw-pill-padding | Pill padding |
Built with ❤ at Freshworks