Button

KButton is probably the most used Kongponent. It supports a number of variations and configuration options.

<KButton appearance="primary">I'm a button</KButton>

Props

appearance

The Button component can take 1 of 6 appearance values:

• primary
• secondary
• outline
• danger
• creation
• btn-link

<KButton appearance='primary'>Primary</KButton>
<KButton appearance="secondary">Secondary</KButton>
<KButton appearance='outline'>Outline</KButton>
<KButton appearance='danger'>Danger</KButton>
<KButton appearance="creation">Creation</KButton>
<KButton appearance='btn-link'>btn-link</KButton>

size

We support small, medium, and large sizes, default to medium.

• small
• medium
• large

<KButton appearance="secondary" size="small">Small</KButton>
<KButton appearance="secondary" size="medium">Medium</KButton>
<KButton appearance="secondary" size="large">Large</KButton>

isOpen

KButton can display a dropdown caret to the right hand side. This is useful for buttons that control dropdowns and popovers. When the prop isOpen is false, the caret will display pointing down. You can rotate the caret (active state) to point up by setting isOpen to true.

The KComponent component is used in this example to create state.

<KComponent :data="{ isActive: false }" v-slot="{ data }">
  <KButton appearance="primary" size="medium" :isOpen="data.isActive" @click="data.isActive = !data.isActive">
    I'm a button
  </KButton>
</KComponent>

isRounded

The buttons are rounded by default. This can be disabled by setting isRounded prop to false.

<KButton appearance="primary" :isRounded="false">I'm a button</KButton>
<KButton appearance="primary" >I'm a button</KButton>

icon

A string for the KIcon name to be displayed to the left of the button's content. Specifying a value for icon will automatically indicate that it should be visible.

If the disable state of the button can be changed, it is recommended to use the icon property instead of the slot, as using the prop will apply correct coloring to the icon depending on the disabled state of the button.

<KButton appearance="primary" icon="spinner">I'm a button</KButton>
<KButton appearance="primary" icon="spinner" disabled>I'm a button</KButton>

to

KButton can render either a <a> or <router-link> by simply passing the to prop. If it receives an object it will render a router link. If it receives a string it will render an HTML anchor tag

Router Link!Anchor Link!

<KButton :to="{path: '/'}" appearance="btn-link">Router Link!</KButton>
<KButton to="http://google.com" appearance="btn-link">Anchor Link!</KButton>

Disabled HTML Attribute

KButton also supports the disabled attribute with both Button and Anchor types.

Disabled Native Anchor Link

<KButton appearance="danger" disabled>Disabled Danger</KButton>
<KButton to="http://google.com" appearance="btn-link" disabled>Disabled Native Anchor Link</KButton>

Slots

Icon

KButton supports using an icon either before the text or without text. If you are using the slot you must maintain the icon color yourself when the button is enabled or disabled.

<KButton appearance="secondary">
  <template v-slot:icon>
    <KIcon icon="externalLink" />
  </template>
  With Text
</KButton>
<KButton appearance="secondary" size="small">
  <template v-slot:icon>
    <KIcon icon="gear" />
  </template>
</KButton>

Theming

Variable	Purpose
--KButtonPrimaryBase	Primary background
--KButtonPrimaryHover	Primary hover state
--KButtonPrimaryActive	Primary active state
--KButtonSecondaryBase	Secondary background
--KButtonSecondaryHover	Secondary hover state
--KButtonSecondaryActive	Secondary active state
--KButtonSecondaryFocus	Secondary focus box shadow color
--KButtonDangerBase	Danger background
--KButtonDangerHover	Danger hover state
--KButtonDangerActive	Danger active state
--KButtonCreationBase	Creation background
--KButtonCreationHover	Creation hover state
--KButtonCreationActive	Creation active state
--KButtonOutlineColor	Outline text color
--KButtonOutlineBorder	Outline border
--KButtonOutlineHoverBorder	Outline hover state border
--KButtonOutlineActive	Outline active state
--KButtonOutlineActiveBorder	Outline active state border
--KButtonLink	Button link variant
--KButtonLinkDanger	Button Danger link variant
--KButtonPaddingY	Button vertical (top and bottom) padding
--KButtonPaddingX	Button horizontal (left and right) padding
--KButtonRadius	Button corner radius

An Example of changing the primary KButton variant to purple instead of blue might look like.

<template>
  <KButton class="purple-button" appearance="primary">PURPLE!</KButton>
</template>

<style>
.purple-button {
  --KButtonPrimaryBase: #494ca2;
  --KButtonPrimaryHover: #6c6ebd;
  --KButtonPrimaryActive: #3c3f86;
}
</style>

There is also a .non-visual-button utility class that can be used for buttons that should not look like buttons.

<KButton class='non-visual-button'>Click Me</KButton>