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

Response Received Overdue New Pending Archived

Show Code

Styling Pills with custom icons or images

Crayons custom icon

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.

Custom Styled Pill

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