# 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