Button Vue Component

Button Components
Button Props
Examples

Button Components

There are following components included:

Button - single button

Button Props

Name	Type	Default	Description
clear	boolean	false	Makes button in clear style (without fill color)
colors	object		Object with Tailwind CSS colors classes
colors.activeBg	string	'active:bg-primary'	Clicked fill button bg color
colors.activeBgDark	string	'active:bg-primary-dark'	Clicked fill button bg color in dark theme
colors.bg	string	'bg-primary'	Full button bg color
colors.border	string	'border-primary'	Outline button border color
colors.disabledBg	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'	Disabled state button bg color
colors.disabledBorder	string	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'	Disabled state button border color
colors.disabledText	string	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'	Disabled state button text color
colors.text	string	'text-primary'	Button text color
colors.touchRipple	string	'touch-ripple-primary'	Touch ripple color
component	string	'button'	Component's HTML Element
disabled	boolean	false	Makes button disabled
href	string		Link's `href` attribute, when specified will also be rendered as `<a>` element
inline	boolean	false	Makes button inline (e.g. `display: inline-flex`)
large	boolean	false	Makes button large
outline	boolean	undefined	Makes button outline
raised	boolean	false	Makes button raised (with shadow)
rounded	boolean	false	Makes button rounded
segmented	boolean	false	Renders segmented button, same as `<SegmentedButton>`
segmentedActive	boolean	false	Renders segmented active button, same as `<SegmentedButton active>`
segmentedStrong	boolean	false	Renders segmented strong button, same as `<SegmentedButton strong>`
small	boolean	false	Makes button small
touchRipple	boolean	true	Enables touch ripple effect in Material theme

Examples

Buttons.vue

<template>
  <k-page>
    <k-navbar title="Buttons" />

    <k-block-title>Default Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button>Button</k-button>
        <k-button
          :colors="{
            text: 'text-red-500',
            border: 'border-red-500',
            bg: 'bg-red-500',
            activeBg: 'active:bg-red-500',
            activeBgDark: 'active:bg-red-600',
          }"
        >
          Button
        </k-button>
        <k-button>Button</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button outline>Outline</k-button>
        <k-button
          :colors="{
            text: 'text-red-500',
            border: 'border-red-500',
            bg: 'bg-red-500',
            activeBg: 'active:bg-red-500',
            activeBgDark: 'active:bg-red-600',
            touchRipple: 'touch-ripple-red-500',
          }"
          outline
        >
          Outline
        </k-button>
        <k-button outline>Outline</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button clear>Clear</k-button>
        <k-button
          :colors="{
            text: 'text-red-500',
            border: 'border-red-500',
            bg: 'bg-red-500',
            activeBg: 'active:bg-red-500',
            activeBgDark: 'active:bg-red-600',
            touchRipple: 'touch-ripple-red-500',
          }"
          clear
        >
          Clear
        </k-button>
        <k-button clear>Clear</k-button>
      </div>
    </k-block>

    <k-block-title>Rounded Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded>Button</k-button>
        <k-button rounded>Button</k-button>
        <k-button rounded>Button</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded outline> Outline </k-button>
        <k-button rounded outline> Outline </k-button>
        <k-button rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded clear> Clear </k-button>
        <k-button rounded clear> Clear </k-button>
        <k-button rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Large Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large>Button</k-button>
        <k-button large>Button</k-button>
        <k-button large rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large outline> Outline </k-button>
        <k-button large outline> Outline </k-button>
        <k-button large rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large clear> Clear </k-button>
        <k-button large clear> Clear </k-button>
        <k-button large rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Small Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small>Button</k-button>
        <k-button small>Button</k-button>
        <k-button small rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small outline> Outline </k-button>
        <k-button small outline> Outline </k-button>
        <k-button small rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button small clear> Clear </k-button>
        <k-button small clear> Clear </k-button>
        <k-button small rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Raised Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised>Button</k-button>
        <k-button raised>Button</k-button>
        <k-button raised rounded> Button </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised outline> Outline </k-button>
        <k-button raised outline> Outline </k-button>
        <k-button raised rounded outline> Outline </k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button raised clear> Clear </k-button>
        <k-button raised clear> Clear </k-button>
        <k-button raised rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Disabled Buttons</k-block-title>
    <k-block strong class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button disabled>Button</k-button>
        <k-button disabled outline>Outline</k-button>
        <k-button disabled clear>Clear</k-button>
      </div>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kButton,
    kBlock,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kButton,
      kBlock,
      kBlockTitle,
    },

  };
</script>