Badge

Documentation and examples for badges, a small component used for counting and labeling.

Badges are simple components used for counting, notifications, and labeling items. They’re small, colorful and can easily draw attention to them.

Badge
<i-badge>Badge</i-badge>

Color Variants

Inkline includes several predefined badge color variants, each serving its own semantic purpose, which you can control using the color property.

Primary
Secondary
Light
Dark
Info
Success
Warning
Danger
<i-badge color="primary">Primary</i-badge>

<i-badge color="secondary">Secondary</i-badge>

<i-badge color="light">Light</i-badge>

<i-badge color="dark">Dark</i-badge>

<i-badge color="info">Info</i-badge>

<i-badge color="success">Success</i-badge>

<i-badge color="warning">Warning</i-badge>

<i-badge color="danger">Danger</i-badge>

Size Variants

You’re able to use the size modifier to control the text and spacing size of your badges, using one of the available sizes: sm, md, and lg.

Small
Medium
Large
<i-badge size="sm">Small</i-badge>

<i-badge size="md">Medium</i-badge>

<i-badge size="lg">Large</i-badge>

Relative Size

Badges always match the size of the immediate parent element by using relative font sizing and em units.

Heading 1
New

Heading 2
New

Heading 3
New

Heading 4
New

Heading 5
New
Heading 6
New
<h1>Heading 1 <i-badge color="primary">New</i-badge></h1>

<h2>Heading 2 <i-badge color="primary">New</i-badge></h2>

<h3>Heading 3 <i-badge color="primary">New</i-badge></h3>

<h4>Heading 4 <i-badge color="primary">New</i-badge></h4>

<h5>Heading 5 <i-badge color="primary">New</i-badge></h5>

<h6>Heading 6 <i-badge color="primary">New</i-badge></h6>

Configuration

Props

Use props to modify the component’s design and behavior.

  • Property
    color
    Type'primary' | 'success' | 'light' | 'dark' | 'info' | 'success' | 'warning' | 'danger'
    Default'light'
    Description The color variant of the badge
  • Property
    size
    Type'sm' | 'md' | 'lg'
    Default'md'
    Description The size variant of the badge

Slots

Use slots to insert custom content into well-defined component locations.

  • Property
    default
    Description Slot for default badge content

CSS Variables

Read more about configuring Inkline’s Design System variables to update the look and feel of the component.

  • Property
    ----background
    Valuecolor('light')
    Description The background of the badge component
  • Property
    ----border-top-color
    Valuecolor('light-55')
    Description The border top color of the badge component
  • Property
    ----border-right-color
    Valuecolor('light-55')
    Description The border right color of the badge component
  • Property
    ----border-bottom-color
    Valuecolor('light-55')
    Description The border bottom color of the badge component
  • Property
    ----border-left-color
    Valuecolor('light-55')
    Description The border left color of the badge component
  • Property
    ----border-color
    Valuevar(----border-top-color) var(----border-right-color) var(----border-bottom-color) var(----border-left-color)
    Description The border color of the badge component
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the badge component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the badge component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the badge component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the badge component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the badge component
  • Property
    ----border-width
    Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
    Description The border width of the badge component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the badge component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the badge component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the badge component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the badge component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the badge component
  • Property
    ----box-shadow
    Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
    Description The box shadow of the badge component
  • Property
    ----border-top-left-radius
    Valuevar(--border-top-left-radius)
    Description The border top left radius of the badge component
  • Property
    ----border-top-right-radius
    Valuevar(--border-top-right-radius)
    Description The border top right radius of the badge component
  • Property
    ----border-bottom-right-radius
    Valuevar(--border-bottom-right-radius)
    Description The border bottom right radius of the badge component
  • Property
    ----border-bottom-left-radius
    Valuevar(--border-bottom-left-radius)
    Description The border bottom left radius of the badge component
  • Property
    ----border-radius
    Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
    Description The border radius of the badge component
  • Property
    ----color
    Valuecontrast-color($color-light)
    Description The color of the badge component
  • Property
    ----font-size
    Value75%
    Description The font size of the badge component
  • Property
    ----font-weight
    Valuefont-weight('bold')
    Description The font weight of the badge component
  • Property
    ----line-height
    Valuevar(--line-height)
    Description The line height of the badge component
  • Property
    ----padding-top
    Valuecalc(var(--padding-top) / 2)
    Description The padding top of the badge component
  • Property
    ----padding-right
    Valuecalc(var(--padding-right) / 2)
    Description The padding right of the badge component
  • Property
    ----padding-bottom
    Valuecalc(var(--padding-bottom) / 2)
    Description The padding bottom of the badge component
  • Property
    ----padding-left
    Valuecalc(var(--padding-left) / 2)
    Description The padding left of the badge component
  • Property
    ----padding
    Valuevar(----padding-top) var(----padding-right) var(----padding-bottom) var(----padding-left)
    Description The padding of the badge component
  • Property
    ----link--background--hover
    Valuecolor('light-60')
    Description The background of the badge component when parent link is hovered
  • Property
    ----pill--border-radius
    Value10rem
    Description The border radius of the badge component