Badge

Display a small count or new-state indicator associated with an element.

<sy-badge>Installation guide Basic usage

Live preview

Interact with the component to see results here.

CountDisplay limitColorPosition

Dot indicatorHide

View code

HTML

<sy-badge
  value="8"
  overflowcount="99"
  variant="red"
  position="topRight"
>
  <sy-button aria-label="Received notifications">Notifications</sy-button>
</sy-badge>

Usage guide

Show short counts or status indicators as supporting information, such as notification counts. Use Tag or body text for longer explanations.

Attach to a target

Wrap the target element to display the badge at its corner.

Display independently

Use standalone without attaching to another element.

Indicate only that something changed

Use dot to indicate a new state without a number.

Examples

Show a count

Place a count at the corner of the associated button.

View code

HTML

<sy-badge value="8">
  <sy-button>Notifications</sy-button>
</sy-badge>

Large counts

Values over 99 are displayed as 99+.

View code

HTML

<sy-badge value="123" overflowcount="99">
  <sy-button>Inbox</sy-button>
</sy-badge>

New state

Use this when an exact count is unnecessary.

View code

HTML

<sy-badge dot>
  <sy-button>Updates</sy-button>
</sy-badge>

Standalone display

Display a count at the end of a row or beside a title.

View code

HTML

<div style="display:flex;flex-wrap:wrap;align-items:center;gap:16px">
  <sy-badge
    value="12"
    standalone
    variant="red"
  ></sy-badge>
  <sy-badge
    value="12"
    standalone
    variant="blue"
  ></sy-badge>
  <sy-badge
    value="12"
    standalone
    variant="green"
  ></sy-badge>
</div>

Hide the notification indicator

Use hidden to hide only the badge. Use this when there are no new notifications or an indicator is unnecessary.

View code

HTML

<sy-badge
  value="8"
  overflowcount="99"
  variant="red"
  position="topRight"
  hidden
  id="supplement-1"
>
  <sy-button aria-label="Received notifications">Notifications</sy-button>
</sy-badge>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "hidden": true
  });
</script>

Bottom-left badge

Place a green count badge at the bottom-left of its target.

View code

HTML

<sy-badge
  value="12"
  overflowcount="99"
  variant="green"
  position="bottomLeft"
  id="supplement-1"
>
  <sy-button aria-label="Received notifications">Notifications</sy-button>
</sy-badge>

<script type="module">
  const component1 = document.querySelector("#supplement-1");
  Object.assign(component1, {
    "position": "bottomLeft",
    "variant": "green",
    "value": 12
  });
</script>

Feature examples

Choose a feature from 10 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Find a feature

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code

HTML

Loading the example.