Zika Alert Design System

Variants

Chips come in three variants: primary, secondary, and ghost (default).

Primary Secondary Ghost

Selected State

Chips can be in a selected state, which changes their appearance to indicate active selection.

Unselected

Primary Secondary Ghost

Selected

Primary Secondary Ghost

With Icons

Chips can include optional leading icons for additional context.

Location Protected Favorite Verified

Dismissible Chips

Chips can be dismissible with an X button. Click the X to remove the chip (powered by Alpine.js).

Dismissible Primary Dismissible With Icon Selected & Dismissible

Note: Refresh the page to restore dismissed chips.

Disabled State

Disabled chips cannot be interacted with.

Disabled Disabled Primary Disabled Selected Disabled with Icon

Use Case: Filter Chips

Chips are ideal for filter interfaces where users can select multiple options.

Risk Level Filters

All Levels Low Risk Moderate Risk High Risk

Location Filters

Brazil Colombia Mexico Florida

Use Case: Category Tags

Chips work well for displaying and managing categories or tags.

Prevention Symptoms Treatment Research Travel Advisory

Interactive Example

Click chips to toggle selection. This demonstrates how chips can be used in a real application.

Low Risk Moderate Risk High Risk

Selected:

Accessibility

Uses role="button" for proper semantics
Includes aria-pressed to indicate selected state
Includes aria-disabled for disabled chips
Keyboard accessible with tabindex="0"
Focus visible ring for keyboard navigation
Dismissible chips have separate accessible close button
Smooth transitions are trauma-informed (not jarring)

Props

Prop	Type	Default	Description
selected	boolean	false	Selected state
disabled	boolean	false	Disabled state
icon	string	null	Optional leading icon name
dismissible	boolean	false	Show X icon to clear (Alpine.js)
variant	string	'ghost'	primary, secondary, ghost
class	string	''	Additional CSS classes

Usage Example


<x-building-blocks.chip>
    Filter Option
</x-building-blocks.chip>


<x-building-blocks.chip variant="primary" :selected="true" icon="check">
    Active Filter
</x-building-blocks.chip>


<x-building-blocks.chip :dismissible="true" icon="location">
    Brazil
</x-building-blocks.chip>


<div x-data="{ selected: false }">
    <x-building-blocks.chip 
        @click="selected = !selected"
        :selected="selected"
    >
        Toggle Me
    </x-building-blocks.chip>
</div>