Chips

Interactive chip elements for various use cases like filtering, selection, and tags.

Basic Usage

Basic Chip

<spr-chips label="Basic Chip" />

With Icons

Regular Icon

Bold Icon

Fill Icon

<template>
  <spr-chips
    :active="activeIcon.isIconActive1"
    label="Regular Icon"
    icon="ph:airplane-landing"
    @update="(e) => handleUpdate('isIconActive1', e)"
  />
  <spr-chips
    :active="activeIcon.isIconActive2"
    label="Bold Icon"
    icon="ph:airplane-landing"
    icon-weight="bold"
    @update="(e) => handleUpdate('isIconActive2', e)"
  />
  <spr-chips
    :active="activeIcon.isIconActive3"
    label="Fill Icon"
    icon="ph:airplane-landing"
    icon-weight="fill"
    @update="(e) => handleUpdate('isIconActive3', e)"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { PhAirplane } from '@phosphor-icons/vue';

const activeIcon = ref({
  isIconActive1: false,
  isIconActive2: false,
  isIconActive3: false,
});

const handleUpdate = (key, value) => {
  activeIcon.value[key] = value;

  console.log(`Chip is now ${value ? 'active' : 'inactive'}`);
};
</script>

With Avatar

Avatar

Avatar

Avatar

<template>
  <spr-chips
    label="Avatar"
    :avatar-url="'https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg'"
    :avatar-variant="'image'"
  />
  <spr-chips
    label="Avatar"
    :avatar-variant="'client'"
  />
  <spr-chips
    label="Avatar"
    :avatar-variant="'user'"
  />
</template>

With Badge

Brand Badge

1

Danger Badge

2

Disabled Badge

3

<template>
  <spr-chips
    :active="activeIcon.isBadgeActive1"
    label="Brand Badge"
    badge
    badge-text="1"
    badge-variant="brand"
    @update="(e) => handleUpdate('isBadgeActive1', e)"
  />
  <spr-chips
    :active="activeIcon.isBadgeActive2"
    label="Danger Badge"
    badge
    badge-text="2"
    badge-variant="danger"
    @update="(e) => handleUpdate('isBadgeActive2', e)"
  />
  <spr-chips
    :active="activeIcon.isBadgeActive3"
    label="Disabled Badge"
    badge
    badge-text="3"
    badge-variant="disabled"
    @update="(e) => handleUpdate('isBadgeActive3', e)"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeIcon = ref({
  isBadgeActive1: true,
  isBadgeActive2: true,
  isBadgeActive3: true,
});

const handleUpdate = (key, value) => {
  activeIcon.value[key] = value;

  console.log(`Chip is now ${value ? 'active' : 'inactive'}`);
};
</script>

Interactive States

Toggleable

Closable

Disabled

<template>
  <spr-chips :active="isToggleActive5" label="Toggleable" @update="(e) => handleUpdate('isToggleActive5', e)" />
  <spr-chips
    :active="isToggleActive6"
    label="Closable"
    closable
    @close="handleClose"
    :visible="visible"
    @update="(e) => handleUpdate('isToggleActive6', e)"
  />
  <spr-chips disabled label="Disabled" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const activeIcon = ref({
  isToggleActive5: true,
  isToggleActive6: true,
});

const handleClose = () => {
  console.log('Chip closed');
};

const handleUpdate = (key, value) => {
  activeIcon.value[key] = value;

  console.log(`Chip is now ${value ? 'active' : 'inactive'}`);
};
</script>

Days Chips

Special variant for weekday selection.

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)"
      @click="handleDayClick(day)"
      variant="day"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
const activeDays = ref({
  Sunday: false,
  Monday: false,
  Tuesday: false,
  Wednesday: false,
  Thursday: false,
  Friday: false,
  Saturday: false,
});

const updateDayActive = (day, value) => {
  activeDays.value[day] = value;
  console.log(`Day ${day} is now ${value ? 'active' : 'inactive'}`);
};

const handleDayClick = (day) => {
  console.log(`Clicked on ${day}`);
};
</script>

API Reference

Name	Description	Type	Default
label	chip text content	string	''
size	chip size	'sm' | 'md' | 'lg'	'md'
active	whether the chip is active	boolean	false
disabled	disable the chip	boolean	false
closable	show close button	boolean	false
icon	leading icon	string	''
iconWeight	icon weight style	'regular' | 'bold' | 'thin' | 'light' | 'fill' | 'duotone'	'regular'
badge	show badge	boolean	false
badgeText	badge content	string	'0'
badgeVariant	badge style variant	'brand' | 'danger' | 'success'	'brand'
visible	badge Visibility	boolean	true
day	day of the week	'Sunday' | 'Monday' | 'Tuesday' | 'Wednesday' | 'Thursday' | 'Friday' | 'Saturday'	required
@update	emitted when active state changes	function	-
@close	emitted when close button is clicked	function	-