@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