The button component
A versatile button component do display one or multiple button links of different styles.
Introduced in SQLPage v0.14.0.
Top-level parameters
class
justify
shape
size
Row-level parameters
color
disabled
download
form
icon
icon_after
id
image
link
narrow
outline
rel
space_after
target
title
tooltip
Example 1
A basic button with a link
select
'button' as component;
select
'/documentation.sql' as link,
'Enabled' as title;
select
'#' as link,
'Disabled' as title,
TRUE as disabled;
Result
Example 2
A button with a custom shape, size, and outline color
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;
Result
Example 3
A list of buttons aligned in the center
select
'button' as component,
'center' as justify;
select
'#' as link,
'light' as color,
'Light' as title;
select
'#' as link,
'success' as color,
'Success' as title;
select
'#' as link,
'info' as color,
'Info' as title;
select
'#' as link,
'dark' as color,
'Dark' as title;
select
'#' as link,
'warning' as color,
'Warning' as title;
select
'#' as link,
'danger' as color,
'Narrow' as title;
Result
Example 4
Icon buttons using the narrow property
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,
'corner-down-right' as icon,
'info' as color,
'Preview' as tooltip;
select
'#' as link,
TRUE as narrow,
'download' as icon,
'success' as color,
'Download' as tooltip;
select
'#' as link,
TRUE as narrow,
'upload' as icon,
'warning' as color,
'Upload' as tooltip;
select
'#' as link,
TRUE as narrow,
'info-circle' as icon,
'cyan' as color,
'Info' as tooltip;
select
'#' as link,
TRUE as narrow,
'help-circle' as icon,
'purple' as color,
'Help' as tooltip;
select
'#' as link,
TRUE as narrow,
'settings' as icon,
'indigo' as color,
'Settings' as tooltip;
Result
Example 5
Buttons with icons and different sizes
select
'button' as component,
'lg' as size;
select
'#' as link,
'azure' as outline,
'Edit' as title,
'edit' as icon;
select
'#' as link,
'danger' as outline,
'Delete' as title,
'trash' as icon;
Result
Example 6
A row of square buttons with spacing in between
select
'button' as component,
'square' as shape;
select
'#' as link,
'green' as color,
'Save' as title,
'device-floppy' as icon;
select
'#' as link,
'Cancel' as title,
TRUE as space_after,
'This will delete your draft' as tooltip;
select
'#' as link,
'indigo' as outline,
'Preview' as title,
'corner-down-right' as icon_after,
'View temporary draft' as tooltip;
Result
Example 7
Multiple buttons sending the same form to different pages.
We use '' AS validate
to remove the submit button from inside the form itself,
and instead use the button component to submit the form to pages with different GET variables.
In the target page, we could then use the GET variable $action
to determine what to do with the form data.
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;
Result
Example 8
A button that downloads a file when clicked, and prevents search engines from following the link.
select
'button' as component;
select
'/sqlpage_introduction_video.webm' as link,
'Download Video' as title,
'download' as icon,
'Introduction Video.webm' as download,
'nofollow' as rel;
Result
Example 9
A button with an image-based icon.
select
'button' as component;
select
'https://en.wikipedia.org/wiki/File:Globe.svg' as link,
'Open an article' as title,
'https://upload.wikimedia.org/wikipedia/commons/f/fa/Globe.svg' as image;