#Button

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

[!button Button](button.md)

[Normal link](button.md)

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

[!button text="Default"]
[!button corners="square" text="Square"]
[!button corners="pill" text="Button Pill"]

[!button size="m" text="Medium"]

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

Retype

[!button 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.

See also the links.target configuration.

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"]

UserSend

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"]

❤️LikeRocket🚀

Any image file can be used as the icon.

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

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