Skip to main content Skip to docs navigation
View on GitHub

Chip

Compact elements representing input, attributes, or actions, often used for tags, filters, or selections that can be added or removed.

On this page
This documentation is a work in progress and may contain incomplete or outdated information. If you have any feedback or suggestions, please open an issue on GitHub.

Variants

Different configurations and states available for chip components to accommodate various selection requirements, filtering interactions, and visual emphasis needs. These variants provide flexibility in appearance, behavior, and semantic meaning while maintaining design consistency across the system.

Chips

Interactive selection elements that enable users to make choices, apply filters, or indicate status within compact interface contexts. These components serve as selectable indicators within interfaces, adapting their appearance and behavior based on selection state, importance, and current context to provide clear visual feedback and maintain consistent user experience across all interface scenarios.

Style Variants

Visual presentation modes that affect the chip's background treatment and overall appearance within the interface. These variants determine the visual weight and selection emphasis approach for different design contexts and hierarchy requirements.

Style variants are implemented as separate Figma components within this file to optimize performance. Each component has the same style and context variants.

Chip variant example image Chip variant example image

Solid

Bold chip styling with full background fill and high contrast appearance. Use for primary selection options requiring strong visual presence or when chips need maximum visibility and emphasis within the interface.

Chip variant example image Chip variant example image

Smooth

Subtle chip styling with soft background treatment and integrated appearance. Use for secondary selection options that should blend naturally with interface content while maintaining clear visibility and selection affordance.

Chip variant example image Chip variant example image

Outline

Bordered chip styling with transparent background and defined edge treatment. Use for minimal selection options requiring subtle emphasis or when maintaining visual hierarchy without adding visual weight to the interface.

Context Variants

Visual styles and semantic meanings that communicate chip purpose, importance, and selection type within the interface hierarchy. These variants determine the chip's prominence, color treatment, and contextual messaging to guide user attention and convey selection significance.

Chip variant example image Chip variant example image

Default

Standard chip styling for general-purpose selections that don't require special emphasis. Use for non-critical filtering options, basic categorization, or secondary selection elements that provide helpful functionality.

Chip variant example image Chip variant example image

Alternate

Alternative styling variant optimized for different backgrounds or emphasized contexts. Use as a visual alternative to default styling in sections with alternate backgrounds or special interface contexts.

Chip variant example image Chip variant example image

Primary

Represents important selection options that users should prioritize. Use for primary filtering criteria, featured categories, or high-priority selection elements that drive core user interaction and engagement.

Chip variant example image Chip variant example image

Secondary

Secondary importance styling for notable but less critical selections than primary chips. Use for supplementary filtering options, alternative categories, or when providing additional selection context alongside primary options.

Chip variant example image Chip variant example image

Neutral

Neutral styling variant for informational selections with minimal urgency or priority. Use when maintaining visual hierarchy while providing functional selection access without demanding immediate attention.

Chip variant example image Chip variant example image

Danger

Critical status styling that signals removal, deletion, or potentially harmful selection states. Use for destructive filters, error indicators, or any selection that requires immediate user attention and indicates problematic conditions.

Chip variant example image Chip variant example image

Success

Positive confirmation styling for completion and success states. Use for successful filters, completed selections, positive indicators, or any chip that confirms successful outcomes and achievements.

Chip variant example image Chip variant example image

Warning

Cautionary styling variant that signals attention-required selections or potential concerns. Use for warning filters, pending selections, approaching limits, or chips that require user awareness and possible action.

Chip variant example image Chip variant example image

Info

Informational styling variant for knowledge-based selections and helpful guidance. Use for informational filters, helpful tips, feature explanations, or chips that provide valuable context and learning opportunities.

Chip variant example image Chip variant example image

Black

High-contrast styling variant that maintains black appearance regardless of theme. Use for maximum visual impact in special contexts or when consistent dark styling is required across theme variations for critical selections.

Chip variant example image Chip variant example image

White

Clean contrast styling variant that maintains white appearance regardless of theme. Use for prominent selections requiring neutral treatment in special contexts or when consistent light styling is needed across theme variations.

Size Variants

Different dimensional scales for chip components to accommodate various layout requirements and visual hierarchies. These variants maintain proportional relationships while adapting to different design contexts and space constraints.

Chip variant example image Chip variant example image

Large

Expanded chip size designed for high-visibility selections requiring more emphasis, such as primary filtering options or important categorization choices. Use for prominent selections in hero sections, mobile interfaces, or when enhanced prominence is required.

Chip variant example image Chip variant example image

Medium

Standard chip size providing balanced proportions for most chip implementations. Use as the default size for primary and secondary selections across general interface contexts where optimal visibility and usability are required.

Chip variant example image Chip variant example image

Small

Compact chip size optimized for dense layouts and secondary selections. Use in constrained spaces, inline filtering, or when multiple chips need to fit within limited screen real estate.

State Variants

Interactive states that affect user interaction capabilities and visual feedback based on current user activity and selection conditions. These variants communicate the chip's availability and guide users through successful selection completion.

Chip variant example image Chip variant example image

Idle

Represents the standard appearance of a chip when it is not being interacted with. Neutral appearance indicates chip is available for selection interaction.

Chip variant example image Chip variant example image

Hover

Provides visual feedback when a user hovers over a chip, indicating that it is interactive. Enhanced visual styling signals available selection and guides user attention.

Chip variant example image Chip variant example image

Press

Indicates that a chip is currently being pressed or activated. Active press state provides immediate tactile feedback during user selection interaction.

Chip variant example image Chip variant example image

Disabled

Shows that a chip is not currently interactive due to its disabled status. Reduced visual prominence indicates unavailability while maintaining interface structure.