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
| name | required | type | description |
|---|---|---|---|
| class | TEXT |
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 | TEXT |
The horizontal alignment of the button list (e.g., start, end, center, between). | |
| shape | TEXT |
Shape of the buttons (e.g., pill, square) | |
| size | TEXT |
The size of the buttons (e.g., sm, lg). |
Row-level parameters
| name | required | type | description |
|---|---|---|---|
| color | The color of the button (e.g., red, green, blue, but also primary, warning, danger, etc.). | ||
| disabled | BOOLEAN |
Whether the button is disabled or not. | |
| download | TEXT |
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 | TEXT |
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 | TEXT |
HTML Identifier to add to the button element. | |
| image | TEXT |
Path to image file (relative. relative to web root or URL) to be displayed on the button. | |
| link | URL |
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 | BOOLEAN |
Whether to trim horizontal padding. | |
| outline | Outline color of the button (e.g. red, purple, ...) | ||
| rel | TEXT |
"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 | BOOLEAN |
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 | TEXT |
"_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 | TEXT |
The text displayed on the button. | |
| tooltip | TEXT |
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;