skip to content

Badge

Badges are static indicators that highlight a status or an update. Badges are usually placed next to or inside a component, like a card.

Demo

<div class="u-mb-24">
	{{> eds-c-badge}}
</div>

When to use this component

Use the Badge component for:

  • active states or tasks (for example, manuscript submission stage)
  • non-actionable states (for example, article version number)
  • current tasks (for example, assess reviewer report)

When not to use this component

Do not use the Badge component:

  • to represent subject categories or topics
  • for actions, filters, or navigation

Do not use an icon without text in a badge.

Badge sizes

Size Description
Default Uses smaller typography and reduced padding to work in spaces with lots of information.
Large For use when additional prominence or readability is required. 
<div class="eds-l-stack" style="--eds-l-stack--gap: 1rem;">
	{{#each .}}
		<div>
			{{> eds-c-badge}}
		</div>
	{{/each}}
</div>

Badge with icon

<div class="eds-l-stack" style="--eds-l-stack--gap: 1rem;">
	{{#each .}}
		<div>
			{{> eds-c-badge}}
		</div>
	{{/each}}
</div>

Badge types

Badges come in 4 different types, 1 default and 3 variants, each with a semantic colour.

Type Use case Example
Default Status where no action is needed. "Version 1.0"
Info General information updates. "Technical checks"
Success Successful status update. "Submission accepted"
Warning Urgent action is needed. "Revision requested" 
<div class="eds-l-stack" style="--eds-l-stack--gap: 1rem;">
	{{#each .}}
		<div>
			{{> eds-c-badge}}
		</div>
	{{/each}}
</div>

Content rules

Text should be clear and short enough to never wrap or truncate. Numeric badges should avoid large values.

How it works

Installation

To install the components, go to the get started guide for developers.

To use the Badge component, enter the following command in your Terminal:

npm install @springernature/elements

Styles

Import the styles of the Badge component into your scss file:

@import '../path/to/@springernature/elements/components/eds-c-badge';

Configuration

To view all the properties of this component, go to the schema.

Name Type Description Required
label String Text content for the badge. ✅
large Boolean Enables large badge size.
variant String Define the variant of badge (info, success, warning).
iconURL String URL of the SVG icon used for badge with icon.

Help improve this page

If you have a question, idea, or suggestion to improve this component or guidance, post in the Ask Elements Teams channel.