Badge

The Badge component is a small visual indicator that can be used to convey information, status, or notifications. It is often used in conjunction with other UI elements to provide context or highlight important information. Badges can be customized in terms of text, color, size, and position.

Key Features

• Text: Badges typically contain a short piece of text or a number to convey information.
• Variant: Badges can have different color schemes to indicate various statuses, such as disabled, brand, danger, or information.
• Size: Badges can come in different sizes to fit various design requirements. (e.g, "big", "small", tiny).
• Positioning: Badges can be positioned relative to the element they are attached to, such as at the top-right or bottom-right corner.

Basic Usage

0

0

0

0

0

0

0

0

<template>
  <div>
    <spr-badge text="9" variant="disabled" size="big" />
    <spr-badge text="9" variant="danger" size="big" />
    <spr-badge text="9" variant="information" size="big" />
    <spr-badge text="9" variant="brand" size="big" />
  </div>

  <div>
    <spr-badge text="9" variant="disabled" size="small" />
    <spr-badge text="9" variant="danger" size="small" />
    <spr-badge text="9" variant="information" size="small" />
    <spr-badge text="9" variant="brand" size="small" />
  </div>

  <div>
    <spr-badge variant="disabled" size="tiny" />
    <spr-badge variant="danger" size="tiny" />
    <spr-badge variant="information" size="tiny" />
    <spr-badge variant="brand" size="tiny" />
  </div>
</template>

Variant

used to customize the background of the badge

9

9

9

9

<template>
  <div>
    <spr-badge text="9" variant="disabled" size="big" />
    <spr-badge text="9" variant="danger" size="big" />
    <spr-badge text="9" variant="information" size="big" />
    <spr-badge text="9" variant="brand" size="big" />
  </div>
</template>

Size

0

30

<template>
  <div>
    <spr-badge text="4" variant="information" size="tiny" />
    <spr-badge text="0" variant="information" size="small" />
    <spr-badge text="30" variant="information" size="big" />
  </div>
</template>

Position

used to display the badge in different positions (top, bottom).

top

9

top

9

top

bottom

9

bottom

9

bottom

default

9

default

9

default

<template>
  <div>
    <spr-badge text="9" variant="brand" size="big" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
    <spr-badge text="9" variant="brand" size="small" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
    <spr-badge text="9" variant="brand" size="tiny" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
  </div>

  <div>
    <spr-badge text="9" variant="information" size="big" position="bottom">
      <spr-lozenge label="bottom" />
    </spr-badge>
    <spr-badge text="9" variant="information" size="small" position="bottom">
      <spr-lozenge label="bottom" />
    </spr-badge>
    <spr-badge text="9" variant="information" size="tiny" position="bottom">
      <spr-lozenge label="bottom" />
    </spr-badge>
  </div>

  <div>
    <spr-badge text="9" variant="danger" size="big">
      <spr-lozenge label="default" />
    </spr-badge>
    <spr-badge text="9" variant="danger" size="small">
      <spr-lozenge label="default" />
    </spr-badge>
    <spr-badge text="9" variant="danger" size="tiny">
      <spr-lozenge label="default" />
    </spr-badge>
  </div>
</template>

Default position using slot

When using the default position, use can use the slot to wrap the element to which you want to attach the badge.

top

9

top

9

top

<template>
  <div>
    <spr-badge text="9" variant="brand" size="big" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
    <spr-badge text="9" variant="brand" size="small" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
    <spr-badge text="9" variant="brand" size="tiny" position="top">
      <spr-lozenge label="top" />
    </spr-badge>
  </div>
</template>

Default position without using slot

When using the default position, use can use the slot to wrap the element to which you want to attach the badge.

notification

9

9

9

9

<template>
  <div>
    <spr-lozenge label="notification" />
    <spr-badge text="9" variant="brand" size="big" />
    <spr-badge text="9" variant="disabled" size="big" />
    <spr-badge text="9" variant="information" size="big" />
    <spr-badge text="9" variant="danger" size="big" />
  </div>
</template>

API Reference

Props

Name	Description	Type	Default
text	The content displayed inside the badge. Typically a short text or number representing a count, notification, or status indicator. Note that when the size is set to tiny, the text will not be displayed.	string	'0'
variant	Determines the color scheme and visual style of the badge to indicate various statuses: brand: Primary brand color, used for standard notifications information: Blue color, used for informational notifications danger: Red color, used for critical or error notifications disabled: Gray color, used for inactive or disabled states	'brand' | 'information' | 'danger' | 'disabled'	'brand'
size	Controls the size of the badge: big: Largest size (20px height, 20px min-width), best for important notifications or when using longer text small: Medium size (16px height, 16px min-width), suitable for most use cases tiny: Smallest size (10px height, 10px min-width), used as a simple indicator dot without text	'big' | 'small' | 'tiny'	'small'
position	Determines the position of the badge relative to its container or slotted content: top: Positions the badge at the top-right corner of the parent element bottom: Positions the badge at the bottom-right corner of the parent element default: Displays the badge as a standalone element When using top or bottom position, you should use the default slot to wrap the element that the badge will be attached to.	'top' | 'bottom' | 'default'	'default'

Slots

Name	Description
default	Content to which the badge will be attached. This is required when using the top or bottom position. The badge will be positioned relative to this content. If no slot content is provided, the badge will be displayed as a standalone element.

Product Uses