Skip to main content
The button component displays one or multiple button links with different styles. Buttons can include icons, tooltips, and can be used to submit forms or navigate to other pages.

​
Basic Usage

SELECT 'button' AS component;
SELECT 'Click me' AS title, 'page.sql' AS link;

​
Top-Level Properties

​
justify
text
Horizontal alignment of buttons: start, end, center, between
​
size
text
Size of all buttons: sm (small) or lg (large)
​
shape
text
Shape of all buttons: pill or square
​
class
text
Custom CSS class for the button container

​
Button Properties

​
title
text
Text displayed on the button
​
link
url
URL to navigate to when clicked. If form is specified, this overrides the form’s action.
​
color
color
Button color: primary, secondary, success, warning, danger, info, red, green, blue, yellow, etc.
​
outline
color
Outline color instead of solid background (e.g., red, purple, blue)
​
icon
icon
Icon name to display on the left side of the button (from tabler-icons.io)
​
icon_after
icon
Icon to display after the text
​
image
url
Path to image file to display on the button instead of an icon
​
narrow
boolean
Trim horizontal padding for icon-only buttons
​
disabled
boolean
Disable the button (makes it non-clickable)
​
tooltip
text
Text shown when hovering over the button
​
space_after
boolean
Add extra space to the right. Pushes subsequent buttons to the right side.
​
form
text
ID of a form to submit when clicked. The button becomes a submit button for that form.
​
target
text
Where to open the link: _blank (new tab), _self (same tab), _parent, or _top
​
download
text
If set, the link downloads the target file with this name instead of navigating
​
rel
text
Link relationship: nofollow (don’t endorse), noopener (untrusted target), noreferrer (hide referrer)
​
modal
text
ID of a modal to open when clicked (see modal component)
​
id
text
HTML identifier for the button element

​
Examples

​
Basic Buttons

SELECT 'button' AS component;

SELECT 'documentation.sql' AS link, 'Enabled' AS title;
SELECT '#' AS link, 'Disabled' AS title, true AS disabled;

​
Colored Buttons

SELECT 'button' AS component, 'center' AS justify;

SELECT '#' AS link, 'Light' AS title, 'light' AS color;
SELECT '#' AS link, 'Success' AS title, 'success' AS color;
SELECT '#' AS link, 'Info' AS title, 'info' AS color;
SELECT '#' AS link, 'Warning' AS title, 'warning' AS color;
SELECT '#' AS link, 'Danger' AS title, 'danger' AS color;

​
Outlined Buttons

SELECT 'button' AS component,
       'sm' AS size,
       'pill' AS shape;

SELECT 'Purple' AS title, 'purple' AS outline;
SELECT 'Orange' AS title, 'orange' AS outline;
SELECT 'Red' AS title, 'red' AS outline;

​
Icon Buttons

SELECT 'button' AS component;

SELECT '#' AS link,
       true AS narrow,
       'edit' AS icon,
       'primary' AS color,
       'Edit' AS tooltip;

SELECT '#' AS link,
       true AS narrow,
       'trash' AS icon,
       'danger' AS color,
       'Delete' AS tooltip;

SELECT '#' AS link,
       true AS narrow,
       'download' AS icon,
       'success' AS color,
       'Download' AS tooltip;

​
Buttons with Icons and Text

SELECT 'button' AS component, 'lg' AS size;

SELECT '#' AS link,
       'Edit' AS title,
       'edit' AS icon,
       'azure' AS outline;

SELECT '#' AS link,
       'Delete' AS title,
       'trash' AS icon,
       'danger' AS outline;

​
Buttons with Spacing

SELECT 'button' AS component, 'square' AS shape;

SELECT '#' AS link,
       'Save' AS title,
       'device-floppy' AS icon,
       'green' AS color;

SELECT '#' AS link,
       'Cancel' AS title,
       true AS space_after,
       'This will delete your draft' AS tooltip;

SELECT '#' AS link,
       'Preview' AS title,
       'corner-down-right' AS icon_after,
       'indigo' AS outline,
       'View temporary draft' AS tooltip;

​
Form Submit Buttons

SELECT 'form' AS component,
       'poem' AS id,
       '' AS validate;

SELECT 'textarea' AS type,
       'Poem' AS name,
       'Write a poem' AS placeholder;

SELECT 'button' AS component;

SELECT '?action=save' AS link,
       'poem' AS form,
       'primary' AS color,
       'Save' AS title;

SELECT '?action=preview' AS link,
       'poem' AS form,
       'yellow' AS outline,
       'Preview' AS title;

​
Download Button

SELECT 'button' AS component;

SELECT '/files/video.webm' AS link,
       'Download Video' AS title,
       'download' AS icon,
       'Introduction Video.webm' AS download,
       'nofollow' AS rel;

​
Button with Image Icon

SELECT 'button' AS component;

SELECT 'https://example.com' AS link,
       'Open article' AS title,
       'https://upload.wikimedia.org/wikipedia/commons/f/fa/Globe.svg' AS image;

​
Open Modal Button

SELECT 'button' AS component;

SELECT 'Open Details' AS title,
       'primary' AS color,
       'info' AS icon,
       'details-modal' AS modal;

SELECT 'modal' AS component,
       'details-modal' AS id,
       'Additional Information' AS title;
SELECT 'This is the modal content.' AS contents;

​
Use Cases

Use buttons as prominent navigation elements: 
SELECT 'button' AS component, 'center' AS justify;

SELECT '/dashboard.sql' AS link, 'Dashboard' AS title, 'home' AS icon;
SELECT '/reports.sql' AS link, 'Reports' AS title, 'chart-bar' AS icon;
SELECT '/settings.sql' AS link, 'Settings' AS title, 'settings' AS icon;

​
Actions

Trigger actions or operations: 
SELECT 'button' AS component;

SELECT 'export.sql' AS link,
       'Export Data' AS title,
       'download' AS icon,
       'success' AS color;

SELECT 'import.sql' AS link,
       'Import Data' AS title,
       'upload' AS icon,
       'info' AS color;

​
Confirmations

SELECT 'button' AS component, 'end' AS justify;

SELECT 'index.sql' AS link, 'Cancel' AS title;
SELECT 'delete.sql?id=' || :id AS link,
       'Confirm Delete' AS title,
       'danger' AS color,
       'trash' AS icon;

​
Styling Tips

  • Use narrow property for icon-only buttons to save space
  • Use outline for secondary actions to reduce visual weight
  • Use space_after to separate groups of related buttons
  • Add tooltip to icon-only buttons for better UX
  • Use consistent colors across your application (primary for main actions, danger for deletions)
  • form - Use the form property to submit forms
  • modal - Use the modal property to open modals
  • tab - For tab-style navigation

Build docs developers (and LLMs) love

Get started for freeTalk to us