v3.12 next
Powered by

# Badge

Similar to a Button, the Badge component uses the same syntax as a hyperlink, but is prefixed with a !badge identifier.

Demo
Source

Badge

Normal link

[!badge Badge](badge.md)

[Normal link](badge.md)

With the Badge component, the link is optional and can be omitted.

Demo
Source

Badge 

[!badge Badge]

# Variant 

// Text only (default Primary variant)
[!badge My Badge]

// Text with variant
[!badge variant="base" text="My Badge"]

// With link and variant
[!badge variant="primary" text="My Badge"](https://retype.com/)
Variant Text only With link
base Base Base
primary (default) Primary Primary
secondary Secondary Secondary
success Success Success
danger Danger Danger
warning Warning Warning
info Info Info
light Light Light
dark Dark Dark
ghost Ghost Ghost
contrast Contrast Contrast

# Corners 

[!badge text="Default"]
[!badge corners="square" text="Square"]
[!badge corners="pill" text="Button Pill"]
Size Example
round (default) Default
square Square
pill Button Pill

# Size 

[!badge size="m" text="Medium"]
Size Example
xs XSmall
s Small
m (default) Medium
l Large
xl XLarge
2xl 2XLarge
3xl 3XLarge

# Target

Sets the target attribute of the badge and specifies which window or tab to open the link into.

Retype 

[!badge target="blank" text="Retype"](https://retype.com/)

If no target is configured, the link will open in the current tab.

The target can be set to any value, although blank is common and will open the link in a new tab. Retype will automatically transform the value blank into _blank which is the actual value required by the browser to indicate that a hyperlink should be opened in a new tab.

There are several other values that may be prefixed with an _ character, including self, parent, and top. The following table demonstrates some common scenarios and naming convention used by Retype to normalize the target values.

Config target value Runtime target value
blank _blank
parent _parent
top _top
self _self
news1 news1
nEWs2 news2
recent NEWS recent-news

See also the links.target configuration.

# Icon and Emoji

# Octicons

Octicons can be used as an icon by settiing the icon property with the name of the Octicon.

[!badge variant="info" icon="person" text="User" margin="0 8 0 0"]
[!badge variant="primary" icon="paper-airplane" iconAlign="right" text="Send"]

User Send

# Emoji

Emoji :shortcodes: can be used for the icon. Please see Mojee for a full list of supported Emoji shortcodes.

[!badge variant="light" icon=":heart:" text="Like"]
[!badge variant="info" icon=":rocket:" iconAlign="right" text="Rocket"]

❤️ Like Rocket 🚀

# Image file

Any image file can be used as the icon.

[!badge icon="../static/retype-icon.svg"]

# SVG image

The icon can also be set with an inline <svg> element.

[!badge icon="<svg width=&quot;24&quot; height=&quot;24&quot;><path fill-rule=&quot;evenodd&quot; d=&quot;M12 16.5a4.5 4.5 0 100-9 4.5 4.5 0 000 9zm0 1.5a6 6 0 100-12 6 6 0 000 12z&quot;></path></svg>" text="Visit website"](badge.md)

Visit website

# Theme variables

Retype gives you full control over the look and feel of your badge components through customizable theme variables.

You can override any of theme variable in your retype.yml configuration file using the theme.base and theme.dark settings.

For example, to change the primary badge color and text color for all instances of the primary badge within your project, add the following to your project's retype.yml file:

theme:
  base:
    # Revise the primary variant base color
    # across all components within the project
    # primary: "#209fb5" 

    # Or, adjust badge only theme variables
    badge-primary: "#209fb5"
    badge-primary-text: "#eff1f5"

To learn more about theme variables and how they work across Retype, check out the Themes Guide, the Theme Variables documentation, and theme Project settings.