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

<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

<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

<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

<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

<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:

<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

1

Danger Badge

2

Disabled Badge

3

<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

<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

1. Toggleable: All chips are toggleable by default. Clicking them will toggle between active and inactive states.
2. Closable: Adding the closable prop adds a close button that emits a close event when clicked.
3. 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.

S

M

T

W

T

F

S

<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.

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
icon	Custom content for the icon area
close-icon	Custom content for the close button icon