Button Vue Component

Button Components

There are following components included:

  • Button - single button

Button Props

NameTypeDefaultDescription
clearbooleanfalse

Makes button in clear style (without fill color)

colorsobject

Object with Tailwind CSS colors classes

colors.activeBgstring'active:bg-primary'

Clicked fill button bg color

colors.activeBgDarkstring'active:bg-primary-dark'

Clicked fill button bg color in dark theme

colors.bgstring'bg-primary'

Full button bg color

colors.borderstring'border-primary'

Outline button border color

colors.disabledBgstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'

Disabled state button bg color

colors.disabledBorderstring'border-black border-opacity-10 dark:border-white dark:border-opacity-10'

Disabled state button border color

colors.disabledTextstring'text-black text-opacity-30 dark:text-white dark:text-opacity-30'

Disabled state button text color

colors.textstring'text-primary'

Button text color

colors.touchRipplestring'touch-ripple-primary'

Touch ripple color

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)

largebooleanfalse

Makes button large

outlinebooleanundefined

Makes button outline

raisedbooleanfalse

Makes button raised (with shadow)

roundedbooleanfalse

Makes button rounded

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>

smallbooleanfalse

Makes button small

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