Badge

The <pines-badge> component renders a compact label used to annotate content with status, category, or count information. Badges are typically placed alongside text or within list items to communicate state at a glance — such as "New", "Pending", or unread notification counts.

Properties

Attribute Type Description
type BadgeType The badge style variant.
color BadgeColor The color scheme.

BadgeType Values

Value Description
Primary Solid filled badge. Use for the most prominent label on a given element — ideal for statuses or tags that need to stand out immediately.
Secondary Lighter filled badge. Use for supplementary labels where a softer visual presence is appropriate alongside primary content.
Outlined Border-only badge with a transparent background. Use when the badge should be visible but not compete with surrounding content — often used for inactive or optional tags.

BadgeColor Values

Value Description
Neutral Default low-emphasis color. Use for general-purpose labels or tags where no specific sentiment needs to be communicated.
Blue Informational color. Use for in-progress states, informational tags, or items that are pending review.
Red Danger or error color. Use for critical statuses such as failed, rejected, or overdue items.
Yellow Warning color. Use for items requiring attention, such as expiring soon, pending approval, or at-risk states.
Purple Use for distinctive categorization — often applied to roles, special tiers, or features that merit visual differentiation.
Green Success or active color. Use to indicate that something is complete, approved, active, or in a healthy state.