Buttons
Source on GitHub

Download

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>

Attributes

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.

Slots

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.

CSS Variables

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.

Notes

Does not work with the autofocus attribute.
The one-click attribute does not currently work with Safari.

Examples

Just Text

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>
Default Primary Secondary Warning Danger

Disabled

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>
Default Primary Secondary Warning Danger

Prefix Icons

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>
Default Primary Secondary Warning Danger

Suffix Icons

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>
Default Primary Secondary Warning Danger

Small Size

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>
Default Primary Secondary Warning Danger

Custom Button

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>
Large

One Click Disabled

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).

Press Me
Re-enable Button