Skip to main content

Badge

Less than 1 minute

A badge which allows you to customize its color.

You can use it in Markdown to add some status for titles or links.

Demo

Heading Badge New MrHope

Badge Test Building MrHope

## Heading Badge <Badge text="New" type="tip" /> <Badge text="MrHope" color="grey" />

Badge Test <Badge text="Building" type="warning" /> <Badge text="MrHope" color="grey" />

Props

text

  • Type: string
  • Required: Yes

Text of the badge

type

  • Type: "tip" | "warning" | "danger" | "info" | "note"
  • Default: "info"

Badge types:

  • tip
  • warning
  • danger
  • info
  • note

color

  • Type: string
  • Required: No

Badge color, please fill in CSS color strings

vertical

  • Type: "top" | "middle" | "baseline" | "bottom"
  • Required: No

Vertical position of the badge