| tags | icon | |
|---|---|---|
|
dot |
Similar to a Badge, the Button component uses the same syntax as a hyperlink, but is prefixed with a !button identifier.
||| Demo !button Button
Normal link ||| Source
[!button Button](button.md)
[Normal link](button.md)|||
[!button variant="primary" text="Primary"]| Variant | Example |
|---|---|
primary (default) |
[!button variant="primary" text="Primary"] |
secondary |
[!button variant="secondary" text="Secondary"] |
success |
[!button variant="success" text="Success"] |
danger |
[!button variant="danger" text="Danger"] |
warning |
[!button variant="warning" text="Warning"] |
info |
[!button variant="info" text="Info"] |
light |
[!button variant="light" text="Light"] |
dark |
[!button variant="dark" text="Dark"] |
ghost |
[!button variant="ghost" text="Ghost"] |
contrast |
[!button variant="contrast" text="Contrast"] |
[!button text="Default"]
[!button corners="square" text="Square"]
[!button corners="pill" text="Button Pill"]| Size | Example |
|---|---|
round (default) |
[!button text="Default"] |
square |
[!button corners="square" text="Square"] |
pill |
[!button corners="pill" text="Button Pill"] |
[!button size="m" text="Medium"]| Size | Example |
|---|---|
xs |
[!button size="xs" text="XSmall"] |
s |
[!button size="s" text="Small"] |
m (default) |
[!button size="m" text="Medium"] |
l |
[!button size="l" text="Large"] |
xl |
[!button size="xl" text="XLarge"] |
2xl |
[!button size="2xl" text="2XLarge"] |
3xl |
[!button size="3xl" text="3XLarge"] |
Sets the target attribute of the button and specifies which window or tab to open the link into.
!button target="blank" text="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.
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.
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"][!button variant="info" icon="person" text="User" margin="0 8 0 0"] [!button variant="primary" icon="paper-airplane" iconAlign="right" text="Send"]
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"][!button variant="light" icon=":heart:" text="Like" margin="0 8 0 0"] [!button variant="info" icon=":rocket:" iconAlign="right" text="Rocket"]
Any image file can be used as the icon.
[!button icon="../static/retype-icon.svg"][!button icon="../static/retype-icon.svg"]
The icon can also be set with an inline <svg> element.
[!button icon="<svg width="24" height="24"><path fill-rule="evenodd" d="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"></path></svg>" text="Visit website"](button.md)