• Introduction
    • Why Liquid Oxygen
    • Getting started
      • React
      • Vue
  • Guides
    • CSS vs. Web Components
    • Component assets
    • Type checking and intellisense
    • Server-side rendering
    • Event handling
    • Form validation
    • Tailwind CSS integration
    • Design tokens
    • Testing
    • Sandbox applications
    • Troubleshooting
      • Popped-out element is rendered in wrong container
      • Failed to execute removeChild on Node
    • FAQ
    • Contributing
  • 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
      • Card Stack
    • Checkbox
    • Circular Progress
    • Context Menu
      • Menu
      • Menuitem
      • Menuitem Group
    • Cookie Consent
    • Header
    • Icon
    • Input
    • Input Message
    • Label
    • Link
    • Loading Indicator
    • Modal
    • Notice
    • Notification
    • Pagination
    • Progress
    • Radio Button
    • Screen Reader Live
    • Screen Reader Only
    • Select
      • Option
      • Option Group
    • Sidenav
      • Sidenav Accordion
      • Sidenav Back
      • Sidenav Header
      • Sidenav Heading
      • Sidenav Navitem
      • Sidenav Separator
      • Sidenav Slider
      • Sidenav Subnav
      • Sidenav Toggle Outside
    • Slider
    • Stepper
      • Step
    • Switch
      • Switch Item
    • Table
      • Table Body
      • Table Caption
      • Table Cell
      • Table Colgroup
      • Table Column
      • Table Footer
      • Table Head
      • Table Header
      • Table Row
      • Table Toolbar
    • 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
(external link)

ld-badge #

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>
<LdBadge icon="checkmark" />

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

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>
<LdBadge icon="checkmark" />

<LdBadge icon="checkmark" size="lg" />

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>
<LdBadge>Badge</LdBadge>

<LdBadge size="lg">Badge</LdBadge>

<LdBadge icon="checkmark">Badge</LdBadge>

<LdBadge icon="checkmark" size="lg">Badge</LdBadge>
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>
<LdBadge brandColor icon="checkmark" />

<LdBadge brandColor>Badge</LdBadge>
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>
<style>{`
  .ld-badge--success {
    --ld-badge-bg-col: var(--ld-thm-success);
  }
`}</style>

<LdBadge className="ld-badge--success" icon="checkmark" />

<LdBadge className="ld-badge--success">Badge</LdBadge>
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

Built with StencilJS