| icon | play | |
|---|---|---|
| tags |
|
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)|||
// Text only (default Primary variant)
[!button My Button]
// Text with variant
[!button text="My Button" variant="success"]
Using text|variant shorthand notation
[!button My Button|success]
// With link and variant
[!button text="My Button" variant="success"](https://retype.com/)| Variant | Text only | With link |
|---|---|---|
base |
[!button variant="base" text="Base"] | !button variant="base" text="Base" |
primary (default) |
[!button variant="primary" text="Primary"] | !button variant="primary" text="Primary" |
secondary |
[!button variant="secondary" text="Secondary"] | !button variant="secondary" text="Secondary" |
success |
[!button variant="success" text="Success"] | !button variant="success" text="Success" |
question |
[!button variant="question" text="Question"] | !button variant="question" text="Question" |
danger |
[!button variant="danger" text="Danger"] | !button variant="danger" text="Danger" |
warning |
[!button variant="warning" text="Warning"] | !button variant="warning" text="Warning" |
info |
[!button variant="info" text="Info"] | !button variant="info" text="Info" |
light |
[!button variant="light" text="Light"] | !button variant="light" text="Light" |
dark |
[!button variant="dark" text="Dark"] | !button variant="dark" text="Dark" |
ghost |
[!button variant="ghost" text="Ghost"] | !button variant="ghost" text="Ghost" |
contrast |
[!button variant="contrast" text="Contrast"] | !button variant="contrast" text="Contrast" |
clean |
[!button variant="clean" text="Clean"] | !button variant="clean" text="Clean" |
[!button text="Default"](button.md)
[!button corners="square" text="Square"](button.md)
[!button corners="pill" text="Button Pill"](button.md)| 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"](button.md)| 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"] |
Use width to set the rendered width of a Button. Use maxWidth to cap how wide the Button can grow.
Numeric-only width and maxWidth values are rendered as pixel values. For example, width="240" is rendered as width: 240px.
Set width="full" to stretch the Button to the full width of its container. This is equivalent to width="100%".
||| Demo [!button text="Fixed width" width="240"]
[!button text="Full width" width="full"]
[!button text="Full width capped" width="full" maxWidth="320"] ||| Source
[!button text="Fixed width" width="240"]
[!button text="Full width" width="full"]
[!button text="Full width capped" width="full" maxWidth="320"]|||
CSS length and percentage values are also supported.
[!button text="Half width" width="50%"]
[!button text="Capped width" width="100%" maxWidth="24rem"]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.md)
[!button variant="primary" icon="paper-airplane" iconAlign="right" text="Send"](button.md)[!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.md)
[!button variant="info" icon=":rocket:" iconAlign="right" text="Rocket"](button.md)[!button variant="light" icon=":heart:" text="Like" margin="0 8 0 0"] [!button variant="info" icon=":rocket:" iconAlign="right" text="Rocket"]
Project icons can be used by setting the icon property to the custom icon name.
[!button variant="light" icon="brand-printer" text="Print" action="print-page"]
[!button variant="clean" icon="brand-printer" text="Print" action="print-page" corners="pill"] [!button variant="light" icon="brand-printer" text="Print" action="print-page"]
[!button variant="clean" icon="brand-printer" text="Print" action="print-page" corners="pill"]
Any image file can be used as the icon.
[!button icon="../static/retype-icon.svg"](button.md)[!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)
[!button icon="<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">" text="Visit website"]
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. !!!
A Button can run an Action instead of navigating to a link. This is useful for built-in actions such as print-page and Custom Actions.
[!button action="print-page" text="Print page"]
[!button Print page](action:print-page)[!button action="print-page" text="Print page"]
!button Print page
Custom actions in _components/actions/ can also return Button properties. The following action builds an Edit on GitHub link and updates the Button text, variant, corners, and icon during the build.
{%{
---
steps:
- with:
link: https://github.com/retypeapp/retype/edit/main{{ page.filePath }}
text: Edit on GitHub
variant: success
corners: pill
icon: mark-github
---}%}
[!button Edit](action:edit-on-github)