There are following components included:
Button
- single buttonName | 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 | |
inline | boolean | false | Makes button inline (e.g. |
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 |
segmentedActive | boolean | false | Renders segmented active button, same as |
segmentedStrong | boolean | false | Renders segmented strong button, same as |
small | boolean | false | Makes button small |
touchRipple | boolean | true | Enables touch ripple effect in Material theme |
<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>