# 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 destination is optional and can be omitted.

Demo

Source

Badge

[!badge Badge]

# Variants

[!badge variant="primary" text="Primary"]

Variant	Example
`primary` (default)	Primary
`secondary`	Secondary
`success`	Success
`danger`	Danger
`warning`	Warning
`info`	Info
`light`	Light
`dark`	Dark
`ghost`	Ghost
`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

component