A collection of buttons with different colors that can be expanded to include extra icons.
<button-default></button-default> <button-primary></button-primary> <button-secondary></button-secondary> <button-warning></button-warning> <button-danger></button-danger> <button-custom></button-custom>
disabled | Disables the button so that it can not be highlighted, clicked or given the focus. |
one-click | Only allows the button to be pressed (clicked) once and then afterwards it disables itself. You can enable it again afterwards. This is used to stop the user from pressing the button more than once by accident. |
default |
The center text of the button.
All text will be shown on a single line.
When using plain text, if the text is too large to fit then it may not display correctly.
To help resolve this issue, you can put the text between some <span> tags, which makes the text ellipsis.
|
prefix | Inserts the slot item on the left of the text. This can be used to add an icon. |
suffix | Inserts the slot item on the right of the text. This can be used for adding an icon. |
The below variables only work with the <button-custom>
tag.
--background | When the button does not have the mouse hovering over it, is not being pressed, and does not have the focus, then these are the variables that are used. |
--text-color | |
--border-color | |
--hover-background | When the mouse is hovering over the button then these are the CSS variables being used. |
--hover-text-color | |
--hover-border-color | |
--active-background | While the button is being pressed it is active and these following variables will be used. |
--active-text-color | |
--active-border-color | |
--focus-box-shadow | When the button has the focus it will be given a box shadow. This sets that CSS property. |
Does not work with the autofocus
attribute.
The one-click
attribute does not currently work with Safari.
Here we are using the buttons with just text inside. There is no extra styling being used and it is using the current font size.
<button-default>Default</button-default> <button-primary>Primary</button-primary> <button-secondary>Secondary</button-secondary> <button-warning>Warning</button-warning> <button-danger>Danger</button-danger>
This is what the buttons look like when they have been disabled. The disabled attribute is being used to trigger this.
<button-default disabled>Default</button-default> <button-primary disabled>Primary</button-primary> <button-secondary disabled>Secondary</button-secondary> <button-warning disabled>Warning</button-warning> <button-danger disabled>Danger</button-danger>
To add a prefix icon you need to include the icon tag within the button tag and give it a slot attribute with the name prefix
.
No extra styling is required for the icon.
<button-default> <icon-exclamation-mark-diamond slot="prefix"></icon-exclamation-mark-diamond> Default </button-default> <button-primary> <icon-column-line-chart slot="prefix"></icon-column-line-chart> Primary </button-primary> <button-secondary> <icon-database-tick slot="prefix"></icon-database-tick> Secondary </button-secondary> <button-warning> <icon-file1 slot="prefix"></icon-file1> Warning </button-warning> <button-danger> <icon-thumbs-up slot="prefix"></icon-thumbs-up> Danger </button-danger>
Adding a suffix icon is just like adding a prefix, you just need to include the icon tag within the button tag and give it the
slot attribute with the value suffix
.
Again, there is no extra styling required for the icon.
You will notice that the slot does not need to come after the text.
The slot order is not important.
<button-default> <icon-pi slot="suffix"></icon-pi> Default </button-default> <button-primary> <icon-piggy-bank-coin slot="suffix"></icon-piggy-bank-coin> Primary </button-primary> <button-secondary> <icon-flower-stem2 slot="suffix"></icon-flower-stem2> Secondary </button-secondary> <button-warning> <icon-file1 slot="suffix"></icon-file1> Warning </button-warning> <button-danger> <icon-thumbs-up slot="suffix"></icon-thumbs-up> Danger </button-danger>
The buttons will inherit the current font size. In this example we set the style of parent element so that the font size is small. This means the buttons inside it will also have the same font size.
<div style="font-size: small;"> <button-default>Default</button-default> <button-primary>Primary</button-primary> <button-secondary>Secondary</button-secondary> <button-warning>Warning</button-warning> <button-danger>Danger</button-danger> </div>
You can change a number of styles using the custom button web component. Normally you would derive a web component from this class to create your own button type. Here we are using some inline styles to set how the button will look.
We have set the font size to be larger than normal, which makes the size of the border larger too.
<button-custom style=" font-size: 3rem; --text-color: white; --background: linear-gradient( to top left, hsl(187, 100%, 71%), hsl(54, 100%, 50%)); --border-color: #add8e6; --hover-text-color: white; --hover-background: linear-gradient( to top left, hsl(187, 100%, 61%), hsl(54, 100%, 40%)); --hover-border-color: rgb(148, 184, 196); --active-text-color: white; --active-background: linear-gradient( to top left, hsl(187, 100%, 51%), hsl(54, 100%, 30%)); --active-border-color: rgb(126, 158, 168);"> <icon-column-line-chart slot="prefix"></icon-column-line-chart> Large <icon-piggy-bank-coin slot="suffix"></icon-piggy-bank-coin> </button-custom>
You can use the attribute one-click
to only allow the button to be pressed once.
In the below example, once you press the Press Me
button it becomes disabled.
You need to re-enable it before the button can be used again.
This could be used with a save button, where you would only want the button pressed once, then go off to perform the
saving process, and then only re-enable it later when the task was completed.
This would stop the user pressing the button a second time by mistake while the saving process was being
performed (and performing another one).