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

Name	Description	Type	Default
Text	short piece of text or a number	string	0
Variant	color schemes to indicate various statuses	string	brand
Size	big, small, tiny	string	small
Position	positioned relative to the element they are attached to	string	default

Product Uses