Badges and Labels

Add visual status indicators and labels to highlight important information

Badges and Labels

Badges provide visual status indicators that help highlight important information like version numbers, status changes, warnings, and feature announcements.

Basic Syntax

Use :::badge{type="..."} to create a badge:

New Feature Breaking Change

Badge Types

All badge types at a glance:

Type Badge Use Case
default :::badgeDefault::: Neutral, general purpose
primary :::badgePrimary::: Primary emphasis, featured items
secondary :::badgeSecondary::: Secondary emphasis, optional items
success :::badgeSuccess::: Positive status, completed, new
warning :::badgeWarning::: Warnings, beta, deprecated
danger :::badgeDanger::: Critical issues, errors, removed
info :::badgeInfo::: Informational, documentation
note :::badgeNote::: Notes, updates
tip :::badgeTip::: Tips, best practices

Success

For positive status and new features. Shows a checkmark icon.

Available Completed Verified New

Warning

For warnings, beta features, and deprecation notices. Shows a warning triangle icon.

Breaking Change Beta Deprecated Experimental

Danger

For critical issues, errors, and removed features. Shows an X icon.

Critical Error Removed Failed

Info

For informational badges. Shows an info icon.

Documentation Coming Soon Read More

Note

For notes and updates. Shows a pencil icon.

Updated Edited Revised

Primary

For primary emphasis and featured items. Shows a checkmark icon.

Featured Required Recommended

Secondary

For secondary emphasis and optional items. Shows a minus icon.

Optional Locked Disabled

Tip

For helpful suggestions and best practices. Shows a lightbulb icon.

Pro Tip Best Practice Hint

Default

Neutral gray badge used when no type is specified. Shows an info icon.

Default No Type

Real-World Examples

API Documentation

Document endpoint status:

GET /api/users :::badge Stable :::

POST /api/auth :::badge Beta :::

DELETE /api/legacy :::badge Deprecated :::

Version Information

v2.0 Latest Legacy

Feature Announcements

New Authentication System :::badge

New :::

We've implemented OAuth 2.0 support for enhanced security.

Old API Endpoints :::badge

Deprecated :::

These endpoints will be removed in v3.0.

Tutorial Progress

Lesson 1: Introduction :::badge Completed :::

Lesson 2: Advanced Topics :::badge In Progress :::

Lesson 3: Final Project :::badge Locked :::

Status Indicators

Online Maintenance Offline

Package Versions

React :::badge 18.2.0 :::

Vue :::badge 3.0.0-beta :::

Angular :::badge Latest :::

Use Cases

Change Logs

Version 2.1.0 :::badge Latest :::

Added ::: New dark mode support

Changed ::: Updated dependencies

Deprecated ::: Old authentication method

Removed ::: Legacy API v1

Documentation

Methods

getUserById(id) :::badge Public :::

validateToken(token) :::badge Internal :::

migrateDatabase() :::badge Deprecated :::

Course Materials

Module 1: JavaScript Basics :::badge Free :::

Module 2: Advanced Patterns :::badge Premium :::

Module 3: Expert Level :::badge Coming Soon :::

Requirements

Node.js 18+ :::badge Required :::

PostgreSQL :::badge Recommended :::

Redis :::badge Optional :::

In Lists

Create status overviews:

Project Status

  • Authentication System :::badge Complete :::
  • User Dashboard :::badge In Progress :::
  • Admin Panel :::badge Planning :::
  • Mobile App :::badge Backlog :::

Browser Support

  • Chrome :::badge Supported :::
  • Firefox :::badge Supported :::
  • Safari :::badge Partial :::
  • IE11 :::badge Not Supported :::

In Tables

Feature Status Version
OAuth 2.0 :::badgeAvailable::: v2.0+
WebSockets :::badgeBeta::: v2.1
GraphQL :::badgeComing Soon::: v3.0
REST API v1 :::badgeDeprecated::: v1.x

Multiple Badges

Combine badges for detailed status:

Premium Feature :::badge Pro :::

New

Legacy Endpoint :::badge Deprecated :::

Removal v3.0

Best Practices

Use Appropriate Types

✅ Good:

New Feature Breaking Change

❌ Avoid:

Critical Error

(Wrong type for error)

Keep Text Concise

✅ Good:

New Beta

❌ Too Verbose:

This is a brand new feature that was just added

Be Consistent

✅ Good:

  • Feature A :::badge Available :::
  • Feature B :::badge Available :::

❌ Inconsistent:

  • Feature A :::badge Available :::
  • Feature B :::badge Ready :::

(Use same wording for same status)

Accessibility

Badges are built with accessibility in mind:

  • ARIA Attributes: role="status" and aria-label
  • Semantic HTML: Uses <span> with proper classes
  • Color + Text: Doesn't rely only on color
  • High Contrast: Supports high contrast mode
  • Screen Readers: Proper labeling for assistive tech

Styling

Badges automatically feature:

  • Unique icons for each badge type
  • Color-coded backgrounds with subtle borders
  • Full dark mode support
  • Uppercase text with letter spacing
  • Pill-shaped rounded corners
  • Smooth transitions
  • High contrast mode support
  • Print-friendly formatting

Syntax Reference

:::badge{type="TYPE"}
Content
:::
Markdown

Available Types:

Type Color Icon Description
default Gray Info circle Neutral, general purpose
primary Indigo Checkmark Primary emphasis
secondary Gray Minus Secondary emphasis
success Green Checkmark Positive status
warning Amber Warning triangle Warnings, beta, deprecated
danger Red X circle Critical issues, errors
info Blue Info circle Information
note Cyan Pencil Notes, updates
tip Purple Lightbulb Tips, best practices

Default Behavior

If no type is specified, defaults to neutral gray:

Default
  • Asides - For longer callout boxes
  • Link Buttons - For call-to-action buttons
  • Annotations - For inline explanations
Back to Markdown Features