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
class attribute added to the container in HTML. It can be used to apply custom styling to this item through css. Added in v0.18.0.
justify
The horizontal alignment of the button list (e.g., start, end, center, between).
shape
Shape of the buttons (e.g., pill, square)
size
The size of the buttons (e.g., sm, lg).
Row-level parameters
color
The color of the button (e.g., red, green, blue, but also primary, warning, danger, etc.).
disabled
Whether the button is disabled or not.
download
If defined, the link will download the target instead of navigating to it. Set the value to the desired name of the downloaded file.
form
Identifier (id) of the form to which the button should submit.
icon
Name of an icon to be displayed on the left side of the button.
icon_after
Name of an icon to display after the text in the button
id
HTML Identifier to add to the button element.
image
Path to image file (relative. relative to web root or URL) to be displayed on the button.
link
The URL to which the button should navigate when clicked. If the form attribute is specified, then this overrides the page to which the form is submitted.
narrow
Whether to trim horizontal padding.
outline
Outline color of the button (e.g. red, purple, ...)
rel
"nofollow" when the contents of the target link are not endorsed, "noopener" when the target is not trusted, and "noreferrer" to hide where the user came from when they open the link.
space_after
Whether there should be extra space to the right of the button. In a line of buttons, this will put the buttons before this one on the left, and the ones after on the right.
target
"_blank" to open the link in a new tab, "_self" to open it in the same tab, "_parent" to open it in the parent frame, or "_top" to open it in the full body of the window.
title
The text displayed on the button.
tooltip
Text displayed when the user hovers over the button.
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;