#
Button
Similar to a Badge, the Button component uses the same syntax as a hyperlink, but is prefixed with a !button
identifier.
#
Variant
// Text only (default Primary variant)
[!button My Button]
// Text with variant
[!button variant="base" text="My Button"]
// With link and variant
[!button variant="primary" text="My Button"](https://retype.com/)
#
Corners
[!button text="Default"](button.md)
[!button corners="square" text="Square"](button.md)
[!button corners="pill" text="Button Pill"](button.md)
#
Size
[!button size="m" text="Medium"](button.md)
#
Target
Sets the target
attribute of the button and specifies which window or tab to open the link into.
[!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.
#
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.md)
[!button variant="primary" icon="paper-airplane" iconAlign="right" text="Send"](button.md)
#
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.md)
[!button variant="info" icon=":rocket:" iconAlign="right" text="Rocket"](button.md)
#
Image file
Any image file can be used as the icon
.
[!button icon="../static/retype-icon.svg"](button.md)
#
SVG image
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)
#
Theme variables
Retype gives you full control over the look and feel of your button 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
button color and text color for all instances of the primary
button 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 button only theme variables
button-primary: "#209fb5"
button-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.
All button theme variables can be customized in this way. Please refer to the Button Component theme variables for the latest options.