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

Events

| Name | Type | Description | | ------- |---------------- | ------------------------------------ | | hover | HoverEvent | Emitted when the button is hovered | | click | ClickEvent | triggerd when the button is clicked|

Slots

| Name | Description | | --------- | ------------------------------------------- | | default | slot for the rendering the button's content |