• Introduction
    • Why Liquid
    • Getting started
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • React bindings
    • Tailwind CSS integration
    • Design tokens
    • Sandbox applications
    • FAQ
  • Globals
    • Animations
    • Border-radius
    • Colors
    • Focus
    • Fonts
    • Shadows
    • Spacings
    • Theming
    • Typography
  • Components
    • Accordion
      • Accordion Panel
      • Accordion Section
      • Accordion Toggle
    • Background Cells
    • Badge
    • Breadcrumbs
      • Crumb
    • Button
    • Card
    • Checkbox
    • Circular Progress
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outsid
    • Slider
    • Switch
      • Switch Item
    • Tabs
      • Tab
      • Tab List
      • Tab Panel
      • Tab Panel List
    • Toggle
    • Tooltip
    • Typography
  • Data Visualization
    • Getting Started
  1. Default
  2. With custom icon
  3. Different sizes
  4. With text
  5. On brand color
  6. Custom color
  7. Properties
  8. Shadow Parts
  9. Dependencies
    1. Depends on
    2. Graph
Components Badge

ld-card #

Default #

<ld-badge icon="checkmark"></ld-badge>
<span class="ld-badge">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>

With custom icon #

<ld-badge>
  <svg slot="icon" viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</ld-badge>
<span class="ld-badge">
  <svg class="ld-icon" viewBox="0 0 24 24" fill="none">
    <rect x="1.5" y="1.5" width="21" height="21" rx="4.5" stroke="currentColor" stroke-width="3"/>
    <circle cx="12" cy="12" r="4.5" stroke="currentColor" stroke-width="3"/>
  </svg>
</span>

Different sizes #

<ld-badge icon="checkmark"></ld-badge>

<ld-badge icon="checkmark" size="lg"></ld-badge>
<span class="ld-badge">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>

<span class="ld-badge ld-badge--lg">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>

With text #

<ld-badge>Badge</ld-badge>

<ld-badge size="lg">Badge</ld-badge>

<ld-badge icon="checkmark">Badge</ld-badge>

<ld-badge icon="checkmark" size="lg">Badge</ld-badge>
<span class="ld-badge">Badge</span>

<span class="ld-badge ld-badge--lg">Badge</span>

<span class="ld-badge ld-badge--with-text">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
  Badge
</span>

<span class="ld-badge ld-badge--with-text ld-badge--lg">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
  Badge
</span>
Badge Badge Badge Badge
Badge Badge Badge Badge

On brand color #

<ld-badge brand-color icon="checkmark"></ld-badge>

<ld-badge brand-color>Badge</ld-badge>
<span class="ld-badge ld-badge--brand-color">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>

<span class="ld-badge ld-badge--brand-color">Badge</span>
Badge
Badge

Custom color #

<style>
  .ld-badge--success {
    --ld-badge-bg-col: var(--ld-thm-success);
  }
</style>

<ld-badge class="ld-badge--success" icon="checkmark"></ld-badge>

<ld-badge class="ld-badge--success">Badge</ld-badge>
<style>
  .ld-badge--success {
    --ld-badge-bg-col: var(--ld-thm-success);
  }
</style>

<span class="ld-badge ld-badge--success">
  <svg class="ld-icon" viewBox="0 0 14 14" fill="none"><path d="m12 4-6.592 6L2 6.6396" stroke="currentcolor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/></svg>
</span>

<span class="ld-badge ld-badge--success">Badge</span>
Badge
Badge

Properties #

Property Attribute Description Type Default
brandColor brand-color Defines badge custom color boolean undefined
icon icon Icon name. string undefined
key key for tracking the node's identity when working with lists string | number undefined
ref ref reference to component any undefined
size size The size of the badge, translated in rem "lg" undefined

Shadow Parts #

Part Description
"icon"

Dependencies #

Depends on #

  • ld-icon

Graph #

graph TD;
  ld-badge --> ld-icon
  style ld-badge fill:#f9f,stroke:#333,stroke-width:4px