Chips — ELF Design System 2.0

Chips

Compact UI elements representing tags, categories, selections, or input. They help users quickly filter, select, or manage items in an interface.

Documentation

Code

Status & Change logs

4.15.26

None-breaking

Added Chips component to the ELF Design System with full type, state, selection, and badge support.

Added four chip types: Default, Default + Dropdown, Default + Leading + Dropdown, and User Chip.

Added four interaction states: Default, Hover, Pressed, and Disabled for all chip types.

Added selected boolean property — shows a leading checkmark and brand-colored label when active, and a trailing × button on dropdown variants.

Added optional badge property that renders a red notification badge (#b7131a) for unread counts.

Added ELF Flutter component ElfChip with complete prop API for type, state, selected, and badge.

Added Raw Flutter code generation using FilterChip, ActionChip, and InputChip patterns.

Overview

Chips are small, interactive elements that let users make selections, filter content, or trigger short actions. They appear in forms, search bars, filter panels, and conversation threads. ELF chips support optional leading icons, dropdown affordances, user avatars, notification badges, and a selected state with a removable close button.

Types Default · + Dropdown · + Leading + Dropdown · User Chip

States Default · Hover · Pressed · Disabled

Props selected · badge · disabled

Anatomy

1 2 3 4

Label

1 Container

2 Leading icon (optional)

3 Label

4 Badge / Trailing icon (optional)

Chip Types

Label

Default

Label only. Use for simple filter tags or category selectors.

Label

Default + Dropdown

Label with a chevron. Opens a menu or popover on press.

Label

Leading + Dropdown

Icon prefix with chevron. Use when the category has a visual identifier.

Label

User Chip

Avatar with initials and a label. Use to represent a person or team.

States

Label

Default

Resting state. Bordered, no fill.

Label

Hover

Blue tint fill and subtle lift shadow.

Label

Pressed

Blue tint fill, shadow removed.

Label

Disabled

50% opacity, not interactive.

Selected State

When a chip is selected it switches to the brand-blue fill, the label turns #006cb6, and a leading checkmark confirms the selection. For dropdown chip types the trailing chevron is replaced by a × button to deselect.

Label

Usage Guidelines

Use chips to let users apply multiple filters or selections simultaneously.

Use User Chips when representing a person, team, or assignee in compact spaces.

Use the Dropdown variant to hint that the chip opens a menu or triggers further input.

Keep chip labels short — ideally one or two words — so rows stay scannable.

Don't

Don't use chips as primary call-to-action buttons — use the Button component instead.

Don't mix chip types in the same row — pick one type per filter group for consistency.

Don't use long labels that wrap to multiple lines inside a chip container.

Don't show a badge count of 0 — hide the badge entirely when there are no unread items.

Variants

Preview