Lozenge

Lozenge represents entities using icons, labels, and images.

Key Features

• Label:The main text displayed on the lozenge.
• Tone: A property that likely changes the visual style of the lozenge to indicate different statuses or types (e.g., "caution", "information").
• URL:A property to specify an image URL, which is used to display an avatar within the lozenge.
• Icon Slot:A named slot (#icon) that allows you to pass a custom icon component to be displayed within the lozenge.

Basic Usage

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

Lozenge

<spr-lozenge label="Lozenge" />

Tone

Plain

pending

information

success

neutral

danger

caution

<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" />

Type

Hollow

Fill

<spr-lozenge label="Hollow" tone="information" />
<spr-lozenge label="Fill" tone="information" fill />

Avatar

pending

information

success

neutral

danger

caution

plain

pending

information

success

neutral

danger

caution

plain

<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" />

Slot Avatar

Users

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

Icon

Users

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

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

Slot

Name	Description
icon	customize icon component
avatar	customize avatar component

API Reference

Name	Description	Type	Default
tone	lozenge tone	'pending' | 'information' | 'success' | 'neutral' | 'caution' | 'danger'	neutral
fill	lozenge type (fill = true, hollow = false)	boolean	false
label	Label	string	label
url	avatar image url	string

Product Uses