Buttons
Styled buttons for calls-to-action, navigation links, and interactive triggers. Buttons support color variants, sizes, icons, and can render as links or button elements.
Basic Button
A default primary filled button with a link:
Get Started[doc-button label="Get Started" link="/v3/getting-started/installation"]
Bordered Style
Use style="bordered" for an outlined variant:
[doc-button label="Learn More" link="/v3/getting-started" style="bordered"]
Color Variants
Buttons support seven color options. The named colors (blue, green, yellow, red, purple) use the same Tailwind shades as the API method badges for visual consistency.
Filled
Default Blue Green Yellow Red Purple Plain[doc-button label="Default" link="#"]
[doc-button label="Blue" link="#" color="blue"]
[doc-button label="Green" link="#" color="green"]
[doc-button label="Yellow" link="#" color="yellow"]
[doc-button label="Red" link="#" color="red"]
[doc-button label="Purple" link="#" color="purple"]
[doc-button label="Plain" link="#" color="plain"]
Bordered
Default Blue Green Yellow Red Purple Plain[doc-button label="Default" link="#" style="bordered"]
[doc-button label="Blue" link="#" style="bordered" color="blue"]
[doc-button label="Green" link="#" style="bordered" color="green"]
[doc-button label="Yellow" link="#" style="bordered" color="yellow"]
[doc-button label="Red" link="#" style="bordered" color="red"]
[doc-button label="Purple" link="#" style="bordered" color="purple"]
[doc-button label="Plain" link="#" style="bordered" color="plain"]
Sizes
Four sizes are available: sm, default, lg, and xl.
[doc-button label="Small" link="#" size="sm"]
[doc-button label="Default" link="#"]
[doc-button label="Large" link="#" size="lg"]
[doc-button label="Extra Large" link="#" size="xl"]
Icons
Add icons to the left, right, or both sides of the button text:
Star Continue Download[doc-button label="Star" link="#" icon-left="tabler/star.svg"]
[doc-button label="Continue" link="#" icon-right="tabler/arrow-right.svg"]
[doc-button label="Download" link="#" icon-left="tabler/download.svg" icon-right="tabler/arrow-down.svg"]
Icons also scale with the button size:
Large with Icon[doc-button label="Large with Icon" link="#" size="lg" icon-left="tabler/rocket.svg"]
New Tab
Use new-tab=true to open the link in a new browser tab:
[doc-button label="Open External" link="https://getgrav.org" new-tab=true icon-right="tabler/external-link.svg"]
Centering
Wrap the button in a centered flex container with center=true:
[doc-button label="Centered Button" link="#" center=true]
Data Attributes
Add custom data attributes for JavaScript interactivity:
[doc-button label="Trigger Action" data-attr="action" data-val="toggle-modal"]
When no link is provided, the button renders as a <button> element instead of an <a> tag, which is ideal for JavaScript-triggered actions.
Custom Classes
Use the classes parameter to add extra CSS utility classes:
[doc-button label="With Margin" link="#" classes="mt-4 mb-4"]
Parameters
| Parameter | Required | Default | Description |
|---|---|---|---|
label |
Yes | — | Button text |
link |
No | — | URL href (renders as <a> if set, <button> if not) |
style |
No | default |
default (filled) or bordered (outline) |
color |
No | default |
default, blue, green, yellow, red, purple, plain |
size |
No | default |
sm, default, lg, xl |
icon-left |
No | — | Icon path for left icon (e.g., tabler/star.svg) |
icon-right |
No | — | Icon path for right icon |
new-tab |
No | false |
Open link in new tab |
center |
No | false |
Wrap button in a centered flex container |
classes |
No | — | Extra CSS classes |
data-attr |
No | — | Data attribute name (renders as data-{name}) |
data-val |
No | — | Data attribute value |