@dpa-id-components/ui-button NPM

@dpa-id-components/ui-button

UiButton Vue 2.x input component based on the dpa Design Kit

Installation

yarn add @dpa-id-components/ui-button

Usage

<!-- SomeComponent.vue using UiButton -->
<template>
  <ui-button :size="medium" :color="blue" :disabled="false"
    :to="myfunction()"
  >
  <!-- Custom button text in default slot -->
  Click me
  </ui-button>
</template>

<script>
  import UiButton from "@dpa-id-components/ui-component";

  export default {
    components: {
      UiButton,
    }
  };
</script>

Demo

View a demo of <ui-button> on Storybook

API

Props

Name	Type	Default	Description
`size`	`String`	`medium`	Sets the `size` attribute of the Button
`color`	`String`	`blue`	Sets the `color` attribute of the Button
`disabled`	`Boolean`	`false`	Wether the `button` is disabled
`to`	`Object`	`null`	vue-router `route` object, renders button as `router-link`
`href`	`String`	`""`	The `href` attribute, renders button as `a` tag
`rounded`	`Boolean`	`false`	Whether a rounded `border-radius` is applied to the button
`textClasses`	`String`	`""`	Additional classes to override default button text styles