logo polydile dile-components

dile-button

Web Component to create a customized button.

Installation

npm i @dile/dile-button

Usage

Import the dile-button component.

import '@dile/dile-button/dile-button.js';

Use the component.

<dile-button>Button Label</dile-button>

Properties

CSS Custom Properties

You can customize it using CSS Custom Properties.

Custom propertyDescriptionDefault
--dile-button-padding-yVertical padding0.5rem
--dile-button-padding-xHorizontal padding0.8rem
--dile-button-border-radiusButton border radius2rem
--dile-button-border-widthButton border width3px
--dile-button-border-colorButton border color#07193b
--dile-button-background-colorBackground color#7BB93D
--dile-button-text-colorText color#fff
--dile-button-font-sizeFont size1rem
--dile-button-font-weightFont weightbold
--dile-button-hover-background-colorHover background color#f3f3ae
--dile-button-hover-text-colorHover text color#303030
--dile-button-hover-border-colorHover border color#666666
--dile-button-ring-colorRing color on focus state#12c9e9
--dile-button-ring-offset-widthRing width on focus state3px
--dile-button-disabled-background-colorDisabled background color#b1ecf7
--dile-button-disabled-border-colorDisabled border color#bbb
--dile-button-disabled-text-colorDisabled text color#999
--dile-button-letter-spacingText letter spacing0

dile-button demos

Regular button

<dile-button>Click here!</dile-button>

Styled button

<style>
  .styled {
    --dile-button-border-color: #666;
    --dile-button-hover-border-color: #ff910f;
    --dile-button-background-color: #491449;
    --dile-button-hover-background-color: #f3c6f3;
    --dile-button-text-color:  #fff; 
    --dile-button-hover-text-color:  #000; 
    --dile-button-font-weight: bold;
    --dile-button-ring-color: #cc5099;
    --dile-button-ring-offset-width: 2px;
    --dile-button-border-radius: 4px;
    --dile-button-text-transform: uppercase;
  }
</style>
<dile-button class="styled">Click here!</dile-button>

Disabled button

  <dile-button name="disabeldbutton" disabled id="disabeldbutton">Disabled button</dile-button>