Lozenge

Lozenge represents entities using icons, labels, and images.

Key Features

label: The text label displayed inside the lozenge.
tone: The color tone of the lozenge. Available tones are: 'plain', 'pending', 'information', 'success', 'danger', 'neutral', 'caution'.
fill: A boolean indicating whether the lozenge should have a filled background (true) or an outlined style (false).
removevalue: A boolean indicating whether to show a remove icon inside the lozenge (true) or not (false).
url: The URL of the avatar image to be displayed inside the lozenge.
visible: A boolean indicating whether the lozenge is visible (true) or hidden (false).
loading: A boolean indicating whether to show a loading spinner inside the lozenge (true) or not (false).
icon: The icon to be displayed inside the lozenge.
postfixIcon: The icon to be displayed at the end of the lozenge.
interactive: A boolean indicating whether the lozenge is interactive (true) or not (false).
dropdown: A boolean indicating whether to show a dropdown arrow inside the lozenge (true) or not (false).

Basic Usage

A basic lozenge with a text is created with the label property.

Lozenge

vue

<spr-lozenge label="Lozenge" />

Tone and Fill

Customize the lozenge's color style (tone) and choose between filled or outlined appearance (fill) to indicate status or emphasis.

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

vue

<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain"/>
  <spr-lozenge label="pending" tone="pending" />
  <spr-lozenge label="information" tone="information" />
  <spr-lozenge label="success" tone="success" />
  <spr-lozenge label="neutral" tone="neutral" />
  <spr-lozenge label="danger" tone="danger" />
  <spr-lozenge label="caution" tone="caution" />
</div>
<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" fill />
  <spr-lozenge label="pending" tone="pending" fill />
  <spr-lozenge label="information" tone="information" fill />
  <spr-lozenge label="success" tone="success" fill />
  <spr-lozenge label="neutral" tone="neutral" fill />
  <spr-lozenge label="danger" tone="danger" fill />
  <spr-lozenge label="caution" tone="caution" fill />
</div>

Avatar

You can use the url property to display an avatar image, or use the avatar slot for custom avatar components.

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

vue

<spr-lozenge label="pending" tone="pending" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="information" tone="information" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="success" tone="success" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="neutral" tone="neutral" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="danger" tone="danger" url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="caution" tone="caution" url="https://tinyurl.com/2vzn782p" />

<spr-lozenge label="pending" tone="pending" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="information" tone="information" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="success" tone="success" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="neutral" tone="neutral" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="danger" tone="danger" fill url="https://tinyurl.com/2vzn782p" />
<spr-lozenge label="caution" tone="caution" fill url="https://tinyurl.com/2vzn782p" />

Slotted Avatar

You can also use the avatar slot to customize the avatar component.

Users

vue

<template>
  <spr-lozenge label="Users" tone="information">
    <template #icon>
      <Icon icon="ph:users-three" />
    </template>

    <template #avatar>
      <img class="h-full w-full rounded-full object-cover" src="https://tinyurl.com/2vzn782p" alt="avatar" />
    </template>
  </spr-lozenge>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

Prefix and Postfix Icon

You can use the icon property or the icon slot to add a prefix icon to the lozenge. By default, the icon property or slot renders as a prefix icon before the label.
To add a postfix icon, use the postfixIcon property or the postfixIcon slot. This allows you to display an icon after the label.

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

vue

<template>
  <!-- Prefix Icon -->
  <spr-lozenge label="pending" tone="pending" icon="ph:users-three" />
  <spr-lozenge label="pending" tone="pending">
    <template #icon>
      <Icon icon="ph:users-three" />
    </template>
  </spr-lozenge>

  <!-- Postfix Icon -->
  <spr-lozenge label="pending" tone="pending" postfix-icon="ph:users-three" />
  <spr-lozenge label="pending" tone="pending">
    <template #postfixIcon>
      <Icon icon="ph:users-three" />
    </template>
  </spr-lozenge>
</template>

<script lang="ts" setup>
import { Icon } from '@iconify/vue';
</script>

Interactive

The interactive prop enables interactive states for the lozenge, allowing it to respond to user actions such as hover and pressed. This is useful for making the lozenge behave like a button or menu trigger.

plain

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

vue

<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" interactive />
  <spr-lozenge label="pending" tone="pending" interactive />
  <spr-lozenge label="information" tone="information" interactive />
  <spr-lozenge label="success" tone="success" interactive />
  <spr-lozenge label="neutral" tone="neutral" interactive />
  <spr-lozenge label="danger" tone="danger" interactive />
  <spr-lozenge label="caution" tone="caution" interactive />
</div>
<div class="spr-flex spr-items-center spr-gap-2 spr-overflow-auto spr-py-3">
  <spr-lozenge label="plain" fill interactive />
  <spr-lozenge label="pending" tone="pending" fill interactive />
  <spr-lozenge label="information" tone="information" fill interactive />
  <spr-lozenge label="success" tone="success" fill interactive />
  <spr-lozenge label="neutral" tone="neutral" fill interactive />
  <spr-lozenge label="danger" tone="danger" fill interactive />
  <spr-lozenge label="caution" tone="caution" fill interactive />
</div>

The dropdown prop makes the lozenge behave as a predefined interactive element with a default postfix dropdown icon (ph:caret-down-fill).

vue

<template>
  <spr-dropdown
    id="lozengeDropdown"
    v-model="dropdownSelection"
    :menu-list="menuList"
    lozenge
    @update:model-value="dropdownUpdateHandler"
  >
    <spr-lozenge v-bind="lozengeProps" dropdown />
  </spr-dropdown>
</template>

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

import { LOZENGE_TONE } from '@/components/lozenge/lozenge';
import { MenuListType } from '@/components/list/list';
import { Header } from '@/components/table/table';

const menuList = ref(
  LOZENGE_TONE.map((tone: string) => ({
    text: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
    value: tone,
    lozengeProps: {
      label: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
      tone: tone,
      fill: true,
      url: 'https://tinyurl.com/2vzn782p',
      icon: 'ph:address-book-tabs',
    },
  })) as MenuListType[],
);

const dropdownSelection = ref('neutral');
const lozengeProps = computed(() => {
  return menuList.value.find((item) => item.value === dropdownSelection.value)?.lozengeProps;
});

const dropdownUpdateHandler = (newSelection: string) => {
  console.log('Dropdown selection updated:', newSelection);
};

const hollowMenuList = ref(
  LOZENGE_TONE.map((tone: string) => ({
    text: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
    value: tone,
    lozengeProps: {
      label: `${tone.charAt(0).toUpperCase() + tone.slice(1)}`,
      tone: tone,
      fill: false,
      url: 'https://tinyurl.com/2vzn782p',
      icon: 'ph:address-book-tabs',
    },
  })) as MenuListType[],
);

const dropdownSelectionHollow = ref('neutral');
const hollowLozengeProps = computed(() => {
  return hollowMenuList.value.find((item) => item.value === dropdownSelectionHollow.value)?.lozengeProps;
});
</script>

NOTE

If you provide a postfixIcon prop or slot, it will override the default dropdown icon.

plain

vue

<spr-lozenge label="plain" dropdown>
  <template #postfixIcon>
    <Icon icon="ph:dots-three-vertical-bold" />
  </template>
</spr-lozenge>

Loading

vue

<template>
  <spr-lozenge loading />
</template>

Max Width

Use the max-width prop to constrain lozenges with long labels.

A very long lozenge label that will be truncated

Unconstrained lozenge with long label

vue

<spr-lozenge label="A very long lozenge label that will be truncated" max-width="120px" tone="information" />

Slot

Name	Description
icon	customize prefix icon component
avatar	customize avatar component
postfix-icon	customize postfix icon component (displayed after the label)

API Reference

Props

Name	Description	Type	Default
label	The primary text content displayed in the lozenge.	string	'label'
tone	Determines the color scheme of the lozenge to indicate status or categorization. Each tone carries semantic meaning: `plain`: Default, neutral styling `pending`: For in-progress or waiting states `information`: For informational content `success`: For positive or completed actions `neutral`: For general, non-emphasized content `danger`: For errors or warnings requiring attention `caution`: For cautionary information	'plain' \| 'pending' \| 'information' \| 'success' \| 'neutral' \| 'caution' \| 'danger'	'plain'
fill	Controls the lozenge's visual style. When `true`, the lozenge has a solid background color. When `false`, it has an outline style with a transparent background.	boolean	false
removable	When `true`, the lozenge can be removed by the user (displays a remove icon).	boolean	false
url	URL for the avatar image to be displayed within the lozenge. If provided, an avatar will be shown at the beginning of the lozenge.	string	''
visible	Controls the visibility of the lozenge. When `false`, the lozenge will not be rendered.	boolean	true
loading	When `true`, displays a skeletal loading state instead of the actual content, indicating that data is being loaded.	boolean	false
icon	Name of an Iconify icon to be displayed as a prefix icon (before the label). Alternatively, use the `icon` slot for custom icons.	string	''
postfix-icon	Name of an Iconify icon to be displayed as a postfix icon (after the label). Alternatively, use the `postfix-icon` slot for custom icons.	string	''
interactive	When `true`, the lozenge responds to user interactions with hover and active states, making it suitable for clickable elements.	boolean	false
dropdown	When `true`, the lozenge behaves as a dropdown trigger with a default caret icon and interactive styling. This automatically sets `interactive` to `true`.	boolean	false
max-width	Sets a maximum width for the lozenge container. Accepts any valid CSS width value (e.g. `120px`, `12rem`, `clamp(100px, 50%, 240px)`, design token values, or `none`). Text beyond this width is truncated with an ellipsis.	string	'none'

Events

Name	Description	Parameters
onRemove	Emitted when the remove button is clicked on a removable lozenge.	(event: MouseEvent)

Slots

Name	Description
icon	Custom content for the prefix icon area (displayed before the label). Use this slot to insert custom icons or components instead of using the `icon` prop.
avatar	Custom content for the avatar area. Use this slot to insert a custom avatar component instead of using the `url` prop.
postfixIcon	Custom content for the postfix icon area (displayed after the label). Use this slot to insert custom icons or components instead of using the `postfixIcon` prop.

Product Uses

Button

Calendar

Sidepanel

Table

Date Picker

Input

Select

Lozenge

Key Features

Basic Usage

Tone and Fill

Avatar

Slotted Avatar

Prefix and Postfix Icon

Interactive

Loading

Max Width

Slot

API Reference

Props

Events

Slots

Product Uses

Lozenge ​

Key Features ​

Basic Usage ​

Tone and Fill ​

Avatar ​

Slotted Avatar ​

Prefix and Postfix Icon ​

Interactive ​

Dropdown ​

Loading ​

Max Width ​

Slot ​

API Reference ​

Props ​

Events ​

Slots ​

Product Uses ​

Lozenge

Key Features

Basic Usage

Tone and Fill

Avatar

Slotted Avatar

Prefix and Postfix Icon

Interactive

Dropdown

Loading

Max Width

Slot

API Reference

Props

Events

Slots

Product Uses