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	undefined	Makes button in clear style (without fill color). Overwrites `clearIos` and `clearMaterial` props
clearIos	boolean	false	Makes button in clear style (without fill color) in iOS theme
clearMaterial	boolean	false	Makes button in clear style (without fill color) in Material theme
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
colors.disabledBg	string	'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder	string	'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText	string	'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIos	string	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	string	''
colors.fillBgIos	string	'bg-primary'
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIos	string	'bg-primary'
colors.tonalBgMaterial	string	'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos	string	'text-primary'
colors.tonalTextMaterial	string	'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple	string	'touch-ripple-primary'
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	undefined	Makes button large. Overwrites `largeIos` and `largeMaterial` props
largeIos	boolean	false	Makes button large in iOS theme
largeMaterial	boolean	false	Makes button large in Material theme
outline	boolean	undefined	Makes button outline. Overwrites `outlineIos` and `outlineMaterial` props
outlineIos	boolean	false	Makes button outline in iOS theme
outlineMaterial	boolean	false	Makes button outline in Material theme
raised	boolean	undefined	Makes button raised (with shadow). Overwrites `raisedIos` and `raisedMaterial` props
raisedIos	boolean	false	Makes button raised (with shadow) in iOS theme
raisedMaterial	boolean	false	Makes button raised (with shadow) in Material theme
rounded	boolean	undefined	Makes button rounded. Overwrites `roundedIos` and `roundedMaterial` props
roundedIos	boolean	false	Makes button rounded in iOS theme
roundedMaterial	boolean	false	Makes button rounded in Material theme
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	undefined	Makes button small. Overwrites `smallIos` and `smallMaterial` props
smallIos	boolean	false	Makes button small in iOS theme
smallMaterial	boolean	false	Makes button small in Material theme
tonal	boolean	undefined	Makes button in tonal style (with semitransparent fill color). Overwrites `tonalIos` and `tonalMaterial` props
tonalIos	boolean	false	Makes button in tonal style (with semitransparent fill color) in iOS theme
tonalMaterial	boolean	false	Makes button in tonal style (with semitransparent fill color) in Material theme
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 outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button>Button</k-button>
        <k-button class="k-color-brand-red"> 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 class="k-color-brand-red" 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 class="k-color-brand-red" clear> Clear </k-button>
        <k-button clear>Clear</k-button>
      </div>
      <div class="grid grid-cols-3 gap-x-4">
        <k-button tonal>Tonal</k-button>
        <k-button class="k-color-brand-red" tonal> Tonal </k-button>
        <k-button tonal>Tonal</k-button>
      </div>
    </k-block>

    <k-block-title>Rounded Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button rounded>Button</k-button>
        <k-button rounded class="k-color-brand-green">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 class="k-color-brand-green">
          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 class="k-color-brand-green"> Clear </k-button>
        <k-button rounded clear> Clear </k-button>
      </div>
    </k-block>

    <k-block-title>Large Buttons</k-block-title>
    <k-block strong outline-ios class="space-y-2">
      <div class="grid grid-cols-3 gap-x-4">
        <k-button large>Button</k-button>
        <k-button large class="k-color-brand-yellow">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 class="k-color-brand-yellow">
          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 class="k-color-brand-yellow"> 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 outline-ios 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 outline-ios 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 outline-ios 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>