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 5 appearance values:

• primary
• secondary
• tertiary
• danger
• none

NOTE

Use appearance="none" to get an unstyled button, making it easier to customize from scratch. This removes the built-in styling but retains the button's functionality.

When appearance="none" is set, the size prop only works if icon is true; otherwise, size has no effect.

<KButton appearance="primary">Primary</KButton>
<KButton appearance="secondary">Secondary</KButton>
<KButton appearance="tertiary">Tertiary</KButton>
<KButton appearance="danger">Danger</KButton>
<KButton appearance="none">None</KButton>

size

KButton comes in small, medium, and large sizes. Defaults to medium.

<KButton size="large">Large</KButton>
<KButton size="medium">Medium</KButton>
<KButton size="small">Small</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="tertiary">Router Link!</KButton>
<KButton to="https://konghq.com/" appearance="tertiary">Anchor Link!</KButton>

icon

Optional boolean flag that you can use when the only content you are passing to KButton is icon and you need to make the button square (left and right padding = top and bottom). Defaults to false.

<KButton icon>
  <KongIcon />
</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="https://konghq.com/" appearance="tertiary" disabled>Disabled Native Anchor Link</KButton>

Slots

default

The default slot allows you to provide the button text as well as to slot in other button content such as an icon. KButton takes care of icon color, size and spacing as long as you use icons provided by @kong/icons package.

<KButton size="large">
  <WorldIcon />
  Button One
</KButton>
<KButton appearance="secondary">
  Button Two
  <ChevronDownIcon />
</KButton>

TIP

When utilizing icons inside KButton, some sizes work better than others. You can use the kui-icon-size-* tokens exported by the @kong/design-tokens package, or manually set the size.

For utilizing icons in KButton not sourced from @kong/icons, we recommend the following dimensions given the button size:

• large: 24px or kui-icon-size-50
• medium: 20px or kui-icon-size-40
• small: 16px or kui-icon-size-30

We also recommend setting the icon style color property to a value of currentColor to inherit the default KButton styling for slotted content.

Events

KButton supports all events a native button and a elements do. Simply bind your event handler function to event with any modifiers.

<form>
  <KButton
    type="submit"
    @click.prevent="onButtonClick"
    @keydown.enter.prevent="onButtonEnter"
  >
    Simple button
  </KButton>
</form>