@psff/cmp-button

@psff/cmp-button psff-button

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

Getting started

• Setup the package as a dependencie.

  yarn add @psff/cmp-button
  

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