# Button

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

Demo
Source
[!button Button](button.md)

[Normal link](button.md)

# Variants

[!button variant="primary" text="Primary"]
Variant Example
primary (default)
secondary
success
danger
warning
info
light
dark
contrast

# Corners

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

# Size

[!button size="m" text="Medium"]
Size Example
xs
s
m (default)
l
xl
2xl
3xl

# Icon and Emoji

# Octicons

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

[!button variant="info" icon="person" text="User"]
[!button variant="primary" icon="paper-airplane" iconAlign="right" text="Send"]


# Emoji

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

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


# Image file

Any image file can be used as the icon.

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

# SVG image

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

[!button 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"](button.md)

Visit website