Button

Usage

The Button component is utilized to render clickable button elements on the page.

Each Button instance is pre-configured with styles based on the default appearance and size values, and can easily be customized per-button, or wrapped in a Snippet for easy reusability.

By providing the to prop to the button, you can easily navigate users to other pages within your Portal, or to external links.

::button
---
appearance: "primary"
size: "medium"
to: "/components/button"
external: false
display: "inline-flex"
---
This is a button!
::

Button Snippet

The Button component will likely be one of the most frequently used components in your Developer Portal. Rather than repeatedly customizing buttons on every page or by adding global custom CSS, alternatively, you can create a button Portal Snippet document to reuse throughout your Portal Pages.

By utilizing the Snippet component's data prop, we can even provide custom button text, URLs, and other attributes dynamically on the page where they are used!

1. Button Snippet: Create a Portal Snippet document for the button markup, customizing the Button component and referencing snippet.data properties where desired.
2. Page: Utilize the Snippet component in the parent document, making sure to provide the dynamic properties.
3. Preview: Preview the rendered button on the page.

---
title: "Button Snippet"
description: "A stylized call-to-action button snippet."
---

::button
---
appearance: "primary"
size: "large"
color: "#ffffff"
background: "linear-gradient(75deg, rgba(42,189,187,1) 22%, rgba(35,43,101,1) 100%)"
border: "none"
margin: "20px 0"
# Bind snippet data to the link
:to: snippet.link
:external: snippet.external
---
{{ $doc.snippet.text || 'Read Now' }}
::

---
title: "My Custom Page"
description: "A custom page in our Developer Portal."
---

::page-section
This is custom page content.

:::snippet
---
name: "button-snippet"
data:
  link: "/components/snippet"
  external: true
  text: "Check out Snippets!"
---
:::

::

Props

appearance

The Button component can take 1 of 5 appearance values:

• Type: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'none'
• Default: 'primary'

::button
---
appearance: "primary"
---
Change my appearance
::

size

The Button component has three built-in sizes.

• Type: 'small' | 'medium' | 'large'
• Default: 'medium'

::button
---
size: "large"
---
Multiple sizes available
::

to

The Button component functions as an anchor tag (a link) when provided a value for the to prop.

• Type: string
• Default: undefined
• You can provide an absolute path to navigate across your Portal: /components/button
• Provide a full URL to navigate to another website: https://konghq.com
• Or provide a hash to navigate to an element with an id attribute on the same page: #appearance

::button
---
to: "/components/button#appearance"
---
I'm a link
::

external

When providing a link to the Button component via the to prop, you can also set the external prop to true to open the link in a new window (the same as target="_blank" on an anchor tag).

• Type: boolean
• Default: false

::button
---
to: "https://konghq.com"
external: true
---
Visit konghq.com
::

icon

Optional boolean to make the button square (left and right padding equals the top and bottom padding). Typically used when the Button content is an icon or single character.

• Type: boolean
• Default: false

::button
---
size: "large"
icon: true
border-radius: "6px"
---
<svg fill="none" width="24px" height="24px" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.56654 17.8134H12.2371L14.1429 20.2096L13.8152 21.026H9.0731L9.18942 20.2096L8.07153 18.4462L8.56654 17.8134ZM11.193 7.28639L13.1602 7.28343L22 17.822L21.3132 21.026H17.5245L17.7604 20.1233L9.50009 10.2732L11.193 7.28639ZM14.6686 3L18.778 6.22975L18.2519 6.77265L18.9644 7.76492V8.82592L16.9157 10.496L13.4703 6.42551H11.4644L12.272 4.94512L14.6686 3ZM6.04318 13.3443L8.90974 10.853L12.7144 15.4313L11.6342 17.1086H8.12603L5.69899 20.2934L5.14469 21.026H2V17.1183L4.93106 13.3443H6.04318Z" fill="currentColor" />
</svg>
::

Shared Props

This component also includes the shared props listed below:

• background - default is null
• backgroundColor - default is null
• border - default is null
• borderRadius - default is null
• color - default is null
• display - default is inline-flex
• margin - default is null
• padding - default is null
• styles - default is ''

See here for more information on shared props.

Slots

default

Use the #default slot to add button text and icons.