ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Badge

yarn add @clayui/badge

Badges help highlight important information, such as notifications or new and unread messages.

  • Examples
  • Markup
  • API

Stable3.2.0View in LexiconCHANGELOGstorybook demos

  • Variations
  • Pill Badges
  • Anchor
  • Links Inside
  • Text Truncate
Badge Sizes have been removed. Use the clay-badge-size($map) mixin to create custom badge sizes for your app.

Variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Primary Secondary Success Info Warning Danger Light Dark
Copied!
Code Sample (expand to see it)
<span class="badge badge-primary">
	<span class="badge-item badge-item-expand">Primary</span>
</span>

<span class="badge badge-secondary">
	<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span class="badge badge-success">
	<span class="badge-item badge-item-expand">Success</span>
</span>

<span class="badge badge-info">
	<span class="badge-item badge-item-expand">Info</span>
</span>

<span class="badge badge-warning">
	<span class="badge-item badge-item-expand">Warning</span>
</span>

<span class="badge badge-danger">
	<span class="badge-item badge-item-expand">Danger</span>
</span>

<span class="badge badge-ligth">
	<span class="badge-item badge-item-expand">Light</span>
</span>

<span class="badge badge-dark">
	<span class="badge-item badge-item-expand">Dark</span>
</span>

Pill Badges

Use the .badge-pill modifier class to make badges more rounded.

Primary Secondary Success Info Warning Danger Light Dark
Copied!
Code Sample (expand to see it)
<span class="badge badge-primary badge-pill">
	<span class="badge-item badge-item-expand">Primary</span>
</span>

<span class="badge badge-secondary badge-pill">
	<span class="badge-item badge-item-expand">Secondary</span>
</span>

<span class="badge badge-success badge-pill">
	<span class="badge-item badge-item-expand">Success</span>
</span>

<span class="badge badge-info badge-pill">
	<span class="badge-item badge-item-expand">Info</span>
</span>

<span class="badge badge-warning badge-pill">
	<span class="badge-item badge-item-expand">Warning</span>
</span>

<span class="badge badge-danger badge-pill">
	<span class="badge-item badge-item-expand">Danger</span>
</span>

<span class="badge badge-ligth badge-pill">
	<span class="badge-item badge-item-expand">Light</span>
</span>

<span class="badge badge-dark badge-pill">
	<span class="badge-item badge-item-expand">Dark</span>
</span>

Anchor

Primary
Copied!
Code Sample (expand to see it)
<a class="badge badge-primary" href="#1">
	<span class="badge-item badge-item-expand">Primary</span>
</a>

Links Inside

Secondary
Copied!
Code Sample (expand to see it)
<span class="badge badge-secondary badge-pill">
	<span class="badge-item badge-item-before">
		<a href="#1">
			<svg
				class="lexicon-icon lexicon-icon-times-circle"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#times-circle"></use>
			</svg>
		</a>
	</span>
	<span class="badge-item badge-item-expand">
		<a href="#1">Primary</a>
	</span>
	<span class="badge-item badge-item-after">
		<button aria-label="Close" class="close" type="button">
			<svg
				class="lexicon-icon lexicon-icon-times"
				focusable="false"
				role="presentation"
			>
				<use href="/images/icons/icons.svg#times"></use>
			</svg>
		</button>
	</span>
</span>

Text Truncate

Wrap the text inside the .text-truncate-inline and .text-truncate modifier class.

ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
Copied!
Code Sample (expand to see it)
<span class="badge badge-secondary">
	<span class="badge-item badge-item-expand">
		<span class="text-truncate-inline">
			<span class="text-truncate">
				ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
				ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAre
			</span>
		</span>
	</span>
</span>

How can this be improved? Create an issue!