The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Documentation versions

Other versions
HDS components v7.0.0 is now available! Learn more about the changes in this major release

Doc::Badge

Basic badge

Hello!

Badge "types"

neutral
information
success
warning
critical

Inverted versions:

neutral-inverted
information-inverted
success-inverted
warning-inverted
critical-inverted

Badge "sizes"

Large (default):

neutral
information
success
warning
critical


neutral-inverted

information-inverted
success-inverted
warning-inverted
critical-inverted

Medium:

neutral
information
success
warning
critical


neutral-inverted

information-inverted
success-inverted
warning-inverted
critical-inverted

Badge inside a <div>

Hello!

Badge inside a markdown paragraph

This is a paragraph that contains the

badge
as inline element


Badge inside a markdown blockquote

Hello!

Badge inside a markdown list


Badge inside a markdown table

Lorem ipsum
Hello!

Badge inside an HTML table

Hello!