Button Vue Component

Button Components

There are following components included:

  • Button - single button

Button Props

NameTypeDefaultDescription
clearbooleanundefined

Makes button in clear style (without fill color). Overwrites clearIos and clearMaterial props

clearIosbooleanfalse

Makes button in clear style (without fill color) in iOS theme

clearMaterialbooleanfalse

Makes button in clear style (without fill color) in Material theme

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgIosstring'active:bg-primary'
colors.activeBgMaterialstring''
colors.disabledBgstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorderstring'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledTextstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIosstring'active:bg-ios-primary-shade'
colors.fillActiveBgMaterialstring''
colors.fillBgIosstring'bg-primary'
colors.fillBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIosstring'text-white'
colors.fillTextMaterialstring'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipplestring'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIosstring'border-primary'
colors.outlineBorderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.textIosstring'text-primary'
colors.textMaterialstring'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIosstring'bg-primary'
colors.tonalBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIosstring'text-primary'
colors.tonalTextMaterialstring'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipplestring'touch-ripple-primary'
componentstring'button'

Component's HTML Element

disabledbooleanfalse

Makes button disabled

hrefstring

Link's href attribute, when specified will also be rendered as <a> element

inlinebooleanfalse

Makes button inline (e.g. display: inline-flex)

largebooleanundefined

Makes button large. Overwrites largeIos and largeMaterial props

largeIosbooleanfalse

Makes button large in iOS theme

largeMaterialbooleanfalse

Makes button large in Material theme

outlinebooleanundefined

Makes button outline. Overwrites outlineIos and outlineMaterial props

outlineIosbooleanfalse

Makes button outline in iOS theme

outlineMaterialbooleanfalse

Makes button outline in Material theme

raisedbooleanundefined

Makes button raised (with shadow). Overwrites raisedIos and raisedMaterial props

raisedIosbooleanfalse

Makes button raised (with shadow) in iOS theme

raisedMaterialbooleanfalse

Makes button raised (with shadow) in Material theme

roundedbooleanundefined

Makes button rounded. Overwrites roundedIos and roundedMaterial props

roundedIosbooleanfalse

Makes button rounded in iOS theme

roundedMaterialbooleanfalse

Makes button rounded in Material theme

segmentedbooleanfalse

Renders segmented button, same as <SegmentedButton>

segmentedActivebooleanfalse

Renders segmented active button, same as <SegmentedButton active>

segmentedStrongbooleanfalse

Renders segmented strong button, same as <SegmentedButton strong>

smallbooleanundefined

Makes button small. Overwrites smallIos and smallMaterial props

smallIosbooleanfalse

Makes button small in iOS theme

smallMaterialbooleanfalse

Makes button small in Material theme

tonalbooleanundefined

Makes button in tonal style (with semitransparent fill color). Overwrites tonalIos and tonalMaterial props

tonalIosbooleanfalse

Makes button in tonal style (with semitransparent fill color) in iOS theme

tonalMaterialbooleanfalse

Makes button in tonal style (with semitransparent fill color) in Material theme

touchRipplebooleantrue

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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.