@psff/cmp-button v1.0.9

@psff/cmp-button psff-button

A standard button element. Allow users to take actions in the page.

Getting started

1. Setup the package as a dependencie.

   yarn add @psff/cmp-button

2. Use the component <psff-button />.

   import PsffButton from '@psff/cmp-button'
   
   @Component({
     components: {
       'psff-button': PsffButton,
     },
   })
   export default class MyComponent extends Vue {}

   .my-button {
     --psff-button-background-color: #fabada;
     --psff-button-label-color: black;
   }

   <psff-button>Button</psff-button>
   <psff-button>
     <template #icon>X</template>
     Button
   </psff-button>
   <psff-button disabled>Button</psff-button>

Specifications

Parameters:

Extend standard <button> element parameters with:

• type (string, default: 'button'): the HTML button type
• icon-position ('left'|'right', default: 'right'): the icon position

Events

This component does not emit any special events.

Custom propperties:

• Generic:

  • --psff-button-background-color (default #648cfa)
  • --psff-button-border-color (default #648cfa)
  • --psff-button-border-size (default 2px)
  • --psff-button-border-radius (default 4px)
  • --psff-button-box-shadow (default: 2px 2px 4px rgba(94, 136, 252, .25))
  • --psff-button-font-family (default: inherit)
  • --psff-button-font-size (default: inherit)
  • --psff-button-font-variant (default: normal)
  • --psff-button-font-weight (default: inherit)
  • --psff-button-height (default: 3rem)
  • --psff-button-icon-spacing (default .2rem)
  • --psff-button-label-color (default #fff)
  • --psff-button-line-height (default: inherit)
  • --psff-button-text-transform (default: none)
  • --psff-button-outline (default: none)
  • --psff-button-padding (default .75rem 1.5rem)
  • --psff-button-width (default: auto)

• Disabled:

  • --psff-button-background-color-disabled (default: #d6d6d6)
  • --psff-button-border-color-disabled (default: #d6d6d6)
  • --psff-button-box-shadow-disabled (default: 2px 2px 4px rgba(49, 49, 49, .25))
  • --psff-button-label-color-disabled (default: --psff-button-label-color-disabled)

• On hovered:

  • --psff-button-background-color-hovered (default: #3066f9)
  • --psff-button-border-color-hovered (default: #3066f9
  • --psff-button-box-shadow-hovered (default: --psff-button-box-shadow)
  • --psff-button-label-color-hovered (default: --psff-button-label-color)

• On focused:

  • --psff-button-background-color-focused (default: #3066f9)
  • --psff-button-border-color-focused (default: #3066f9)
  • --psff-button-box-shadow-focused (default: --psff-button-box-shadow)
  • --psff-button-label-color-focused (default: --psff-button-label-color)

• On actived:

  • --psff-button-background-color-actived (default: #3066f9)
  • --psff-button-border-color-actived (default: #3066f9)
  • --psff-button-box-shadow-actived (default: --psff-button-box-shadow)
  • --psff-button-label-color-actived (default: --psff-button-label-color)