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.
Color Variants
Inkline includes several predefined badge color variants, each serving its own semantic purpose, which you can control using the color
property.
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
.
Relative Size
Badges always match the size of the immediate parent element by using relative font sizing and em
units.
Heading 1New
Heading 2New
Heading 3New
Heading 4New
Heading 5New
Heading 6New
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