Chips Component

The spr-chips component provides interactive elements for filtering, selection, tagging, and displaying small pieces of information. Chips are compact, versatile UI elements that can include text, icons, avatars, and badges.

Overview

Chips in the Sprout Design System offer:

Interactive states (active, disabled, closable)
Support for icons, avatars, and badges
Special variants for day selection
Customizable appearance with various props

Basic Usage

At its simplest, a chip displays a text label. The chip can be in either an active or inactive state, controlled through the active prop.

Basic Chip

Active Chip

vue

<template>
  <!-- Default inactive chip -->
  <spr-chips label="Basic Chip" />

  <!-- Active chip -->
  <spr-chips label="Active Chip" :active="true" />
</template>

<script lang="ts" setup>
import SprChips from '@/components/chips/chips.vue';
</script>

Chips can be used for various purposes:

As filter options in search interfaces
For selecting categories or tags
To display applied filters that can be removed
As toggleable option selectors

Size

Chips come in different sizes to accommodate various design needs. The available sizes are:

sm - Small size for compact displays
md - Medium size (default)

Small Chip

Medium Chip

vue

<template>
  <spr-chips label="Small Chip" size="sm" />
  <spr-chips label="Medium Chip" />
</template>

<script lang="ts" setup>
import SprChips from '@/components/chips/chips.vue';
</script>

Tone

Chips come in different tones to convey different meanings. The available tones are:

subtle - A subtle tone for less emphasis
default - The standard tone for general use

Subtle Chip

Default Chip

vue

<template>
  <spr-chips label="Subtle Chip" tone="subtle" />
  <spr-chips label="Default Chip" />
</template>

<script lang="ts" setup>
import SprChips from '@/components/chips/chips.vue';
</script>

Chips with Icons

Icons can enhance the visual meaning of chips and make them more recognizable. The icon prop accepts Iconify icon names, and the icon-weight prop allows you to control the icon's style.

Regular Icon

Bold Icon

Fill Icon

vue

<template>
  <!-- Regular weight icon -->
  <spr-chips
    :active="activeChips.flight"
    label="Regular Icon"
    icon="ph:airplane-landing"
    @update="(value) => updateChip('flight', value)"
  />

  <!-- Bold weight icon -->
  <spr-chips
    :active="activeChips.flightBold"
    label="Bold Icon"
    icon="ph:airplane-landing"
    icon-weight="bold"
    @update="(value) => updateChip('flightBold', value)"
  />

  <!-- Fill weight icon -->
  <spr-chips
    :active="activeChips.flightFill"
    label="Fill Icon"
    icon="ph:airplane-landing"
    icon-weight="fill"
    @update="(value) => updateChip('flightFill', value)"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import SprChips from '@/components/chips/chips.vue';

const activeChips = ref({
  flight: false,
  flightBold: false,
  flightFill: false,
});

const updateChip = (key, value) => {
  activeChips.value[key] = value;
  console.log(`Chip ${key} is now ${value ? 'active' : 'inactive'}`);
};
</script>

Available Icon Weights

The component supports several icon weights to match your design needs:

regular (default) - Standard weight icons
bold - Heavier weight for emphasis
fill - Solid filled version
thin - Lighter weight
light - Slightly lighter than regular
duotone - Two-tone style

Chips with Avatars

Chips can include avatars to represent users, clients, or any entity. The chip uses the spr-avatar component internally, supporting different avatar variants.

User Image

Client Icon

User Icon

vue

<template>
  <!-- Chip with image avatar -->
  <spr-chips
    label="User Image"
    :avatar-url="'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg'"
    :avatar-variant="'image'"
  />

  <!-- Chip with client icon avatar -->
  <spr-chips label="Client Icon" :avatar-variant="'client'" />

  <!-- Chip with user icon avatar -->
  <spr-chips label="User Icon" :avatar-variant="'user'" />
</template>

<script lang="ts" setup>
import SprChips from '@/components/chips/chips.vue';
</script>

You can also use the avatar-initials prop to display text initials instead of an image:

vue

<spr-chips label="John Doe" :avatar-variant="'text'" avatar-initials="JD" />

Chips with Badges

Badges can be added to chips to display counts, status indicators, or other small pieces of information. Set the badge prop to true and use badge-text and badge-variant to customize the badge.

Brand Badge

Danger Badge

Disabled Badge

vue

<template>
  <!-- Chip with brand variant badge -->
  <spr-chips
    :active="filterCounts.messages"
    label="Messages"
    badge
    badge-text="1"
    badge-variant="brand"
    @update="(value) => updateFilter('messages', value)"
  />

  <!-- Chip with danger variant badge -->
  <spr-chips
    :active="filterCounts.alerts"
    label="Alerts"
    badge
    badge-text="2"
    badge-variant="danger"
    @update="(value) => updateFilter('alerts', value)"
  />

  <!-- Chip with disabled variant badge -->
  <spr-chips
    :active="filterCounts.tasks"
    label="Tasks"
    badge
    badge-text="3"
    badge-variant="disabled"
    @update="(value) => updateFilter('tasks', value)"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import SprChips from '@/components/chips/chips.vue';

const filterCounts = ref({
  messages: true,
  alerts: true,
  tasks: true,
});

const updateFilter = (key, value) => {
  filterCounts.value[key] = value;
  console.log(`Filter ${key} is now ${value ? 'active' : 'inactive'}`);
};
</script>

Badge Variants

Badges in chips support these variants:

brand: Uses the primary brand color
danger: Red color for errors or alerts
disabled: Gray color for unavailable or inactive items

Interactive States

Chips can have different interactive states to provide a rich user experience.

Toggleable

Closable

Disabled

vue

<template>
  <!-- Toggleable chip that changes active state when clicked -->
  <spr-chips :active="chipStates.toggle" label="Toggleable" @update="(value) => updateChipState('toggle', value)" />

  <!-- Closable chip with close button -->
  <spr-chips
    :active="chipStates.closable"
    label="Closable"
    closable
    :visible="chipVisible"
    @close="handleChipClose"
    @update="(value) => updateChipState('closable', value)"
  />

  <!-- Disabled chip that cannot be interacted with -->
  <spr-chips disabled label="Disabled" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import SprChips from '@/components/chips/chips.vue';

const chipStates = ref({
  toggle: true,
  closable: true,
});

const chipVisible = ref(true);

const updateChipState = (key, value) => {
  chipStates.value[key] = value;
  console.log(`Chip ${key} is now ${value ? 'active' : 'inactive'}`);
};

const handleChipClose = () => {
  console.log('Chip closed');
  chipVisible.value = false;
  // You might also want to remove the chip from your data structure here
};
</script>

Interaction Types

Toggleable: All chips are toggleable by default. Clicking them will toggle between active and inactive states.
Closable: Adding the closable prop adds a close button that emits a close event when clicked.
Disabled: The disabled prop renders the chip in a non-interactive state with disabled styling.

When a chip is closed, you should update your data structures accordingly. The visible prop controls whether the chip is rendered at all.

Day Selection Chips

The chip component includes a special day variant specifically designed for weekday selection interfaces. This variant displays the first letter of each day and has a circular appearance.

vue

<template>
  <div class="spr-flex spr-items-center spr-gap-1">
    <spr-chips
      v-for="day in days"
      :key="day"
      :day="day"
      :active="activeDays[day]"
      @update="(value) => updateDayActive(day, value)"
      variant="day"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import SprChips from '@/components/chips/chips.vue';

// Array of all days of the week
const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Reactive object to track active state of each day
const activeDays = ref({
  Sunday: false,
  Monday: false,
  Tuesday: false,
  Wednesday: false,
  Thursday: false,
  Friday: false,
  Saturday: false,
});

// Update function to toggle day state
const updateDayActive = (day, value) => {
  activeDays.value[day] = value;
  console.log(`Day ${day} is now ${value ? 'active' : 'inactive'}`);
};
</script>

Usage Examples

The day selection chips are particularly useful for:

Recurring schedule selection in calendar applications
Setting availability or business hours
Configuring repeating events or tasks

TIP

For more complex date selection needs, consider combining day chips with the DatePicker component.

Slots

The Chips component provides several slots for customizing content and icons.

Default Slot

The default slot allows you to completely customize the chip content, overriding the standard label display.

Custom Content

Status: Online

vue

<template>
  <!-- Custom content with icon -->
  <spr-chips :active="true">
    <span class="spr-flex spr-items-center spr-gap-1">
      <Icon icon="ph:star-fill" class="spr-text-yellow-500" />
      <span>Custom Content</span>
    </span>
  </spr-chips>

  <!-- Custom status indicator -->
  <spr-chips>
    <span class="spr-flex spr-items-center spr-gap-1">
      <span class="spr-w-2 spr-h-2 spr-bg-green-500 spr-rounded-full"></span>
      <span>Status: Online</span>
    </span>
  </spr-chips>
</template>

<script setup>
import { Icon } from '@iconify/vue';
import SprChips from '@/components/chips/chips.vue';
</script>

Icon Slot

The icon slot allows you to customize the icon displayed in the chip while keeping the standard label structure.

Custom Icon

Animated Icon

vue

<template>
  <!-- Custom heart icon -->
  <spr-chips label="Custom Icon" icon="ph:heart" :active="true">
    <template #icon>
      <Icon icon="ph:heart-fill" class="spr-text-red-500 spr-font-size-300" />
    </template>
  </spr-chips>

  <!-- Animated icon -->
  <spr-chips label="Animated Icon" icon="ph:sparkle">
    <template #icon>
      <Icon icon="ph:sparkle" class="spr-text-purple-500 spr-font-size-300 spr-animate-spin" />
    </template>
  </spr-chips>
</template>

<script setup>
import { Icon } from '@iconify/vue';
import SprChips from '@/components/chips/chips.vue';
</script>

Close Icon Slot

The close-icon slot allows you to customize the close button icon for closable chips.

Custom Close

Alternative Close

vue

<template>
  <!-- Custom close icon -->
  <spr-chips label="Custom Close" closable :active="true">
    <template #close-icon>
      <Icon icon="ph:minus-circle" class="spr-text-red-500" />
    </template>
  </spr-chips>

  <!-- Alternative close icon -->
  <spr-chips label="Alternative Close" closable>
    <template #close-icon>
      <Icon icon="ph:x-circle" class="spr-text-gray-500" />
    </template>
  </spr-chips>
</template>

<script setup>
import { Icon } from '@iconify/vue';
import SprChips from '@/components/chips/chips.vue';
</script>

Advanced Slot Combinations

You can combine multiple slots to create sophisticated chip designs.

John DoeAdmin

Project AlphaActive

vue

<template>
  <!-- User chip with custom close -->
  <spr-chips :active="true">
    <span class="spr-flex spr-items-center spr-gap-2">
      <Icon icon="ph:user-circle" class="spr-text-blue-500" />
      <span>John Doe</span>
      <span class="spr-px-2 spr-py-1 spr-bg-blue-100 spr-text-blue-800 spr-text-xs spr-rounded-full">Admin</span>
    </span>
    <template #close-icon>
      <Icon icon="ph:user-minus" class="spr-text-red-500" />
    </template>
  </spr-chips>

  <!-- Project chip with gradient indicator -->
  <spr-chips>
    <span class="spr-flex spr-items-center spr-gap-2">
      <span class="spr-w-3 spr-h-3 spr-bg-gradient-to-r spr-from-green-400 spr-to-blue-500 spr-rounded-full"></span>
      <span>Project Alpha</span>
      <span class="spr-px-2 spr-py-1 spr-bg-gray-100 spr-text-gray-600 spr-text-xs spr-rounded-full">Active</span>
    </span>
  </spr-chips>
</template>

<script setup>
import { Icon } from '@iconify/vue';
import SprChips from '@/components/chips/chips.vue';
</script>

API Reference

Props

Name	Description	Type	Default
label	The text content displayed in the chip	string	''
size	Controls the size of the chip	'sm' \| 'md' \| 'lg'	'md'
tone	Controls the tone of the chip	'subtle' \| 'default'	'default'
active	Determines if the chip is in an active/selected state	boolean	false
disabled	When true, makes the chip non-interactive and applies disabled styling	boolean	false
closable	When true, displays a close button that emits a close event when clicked	boolean	false
variant	Changes the appearance and behavior of the chip	'tag' \| 'day'	'tag'
Icon Props
icon	Iconify icon name to display before the label	string	''
iconWeight	The visual weight/style of the icon	'regular' \| 'bold' \| 'thin' \| 'light' \| 'fill' \| 'duotone'	'regular'
closeIconSize	Size of the close icon in pixels (when closable is true)	number	16
Avatar Props
avatarUrl	URL of the image to display in the avatar	string	''
avatarVariant	Type of avatar to display	'image' \| 'text' \| 'client' \| 'user'	''
avatarInitials	Text initials to display when avatarVariant is 'text'	string	''
Badge Props
badge	When true, displays a badge on the chip	boolean	false
badgeText	Text content of the badge (typically a number)	string	'0'
badgeVariant	Visual style of the badge	'brand' \| 'danger' \| 'disabled'	'brand'
Other Props
visible	Controls whether the chip is rendered at all	boolean	true
day	Day name for the day variant (required when variant is 'day')	'Sunday' \| 'Monday' \| 'Tuesday' \| 'Wednesday' \| 'Thursday' \| 'Friday' \| 'Saturday'	-

Events

Name	Description	Parameters
update	Emitted when the chip's active state changes, typically when clicked	(value: boolean): The new active state
close	Emitted when the close button is clicked (when closable is true)	(event: MouseEvent \| KeyboardEvent): The original DOM event

Slots

Name	Description
default	Custom content that completely overrides the standard chip display
icon	Custom content for the icon area (when using standard chip structure)
close-icon	Custom content for the close button icon (when closable is true)

Button

Calendar

Sidepanel

Table

Date Picker

Input

Select

Chips Component

Overview

Basic Usage

Size

Tone

Chips with Icons

Available Icon Weights

Chips with Avatars

Chips with Badges

Badge Variants

Interactive States

Interaction Types

Day Selection Chips

Usage Examples

Slots

Default Slot

Icon Slot

Close Icon Slot

Advanced Slot Combinations

API Reference

Props

Events

Slots

Chips Component ​

Overview ​

Basic Usage ​

Size ​

Tone ​

Chips with Icons ​

Available Icon Weights ​

Chips with Avatars ​

Chips with Badges ​

Badge Variants ​

Interactive States ​

Interaction Types ​

Day Selection Chips ​

Usage Examples ​

Slots ​

Default Slot ​

Icon Slot ​

Close Icon Slot ​

Advanced Slot Combinations ​

API Reference ​

Props ​

Events ​

Slots ​

Chips Component

Overview

Basic Usage

Size

Tone

Chips with Icons

Available Icon Weights

Chips with Avatars

Chips with Badges

Badge Variants

Interactive States

Interaction Types

Day Selection Chips

Usage Examples

Slots

Default Slot

Icon Slot

Close Icon Slot

Advanced Slot Combinations

API Reference

Props

Events

Slots