GkButton

<button> or <a> (when href is set) with God Kit styling: primary, secondary, ghost, and danger variants, sm / md sizes, optional loading, readonly, slim, stacked, and prepend / append / loader slots.

When to use

Use for actions in forms, dialogs, and toolbars. Prefer type="submit" inside forms and type="button" for standalone actions. For navigation to a URL, pass href (renders an anchor with the same styles). Router-aware navigation (to) belongs in the app (e.g. NuxtLink wrapping GkButton or a small app wrapper).

Live Examples

Variants

Primary, secondary, ghost, and danger for hierarchy and emphasis.

vue

<script setup lang="ts">
import { GkButton } from 'god-kit/vue'
</script>

<template>
  <div class="gk-doc-row">
    <GkButton variant="primary">
      Primary
    </GkButton>
    <GkButton variant="secondary">
      Secondary
    </GkButton>
    <GkButton variant="ghost">
      Ghost
    </GkButton>
    <GkButton variant="danger">
      Danger
    </GkButton>
  </div>
</template>

<style scoped>
.gk-doc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-3);
  align-items: center;
}
</style>

Slim, stacked, loading, link

Compact layout, icon column, async submit with loading, and anchor rendering via href.

Link

vue

<script setup lang="ts">
import { GkButton } from 'god-kit/vue'
import { ref } from 'vue'

const busy = ref(false)
function submit() {
  busy.value = true
  setTimeout(() => {
    busy.value = false
  }, 1200)
}
</script>

<template>
  <div class="gk-doc-row">
    <GkButton size="sm" slim variant="secondary">
      Slim
    </GkButton>
    <GkButton stacked variant="secondary">
      <span aria-hidden="true">+</span>
      <span>Stacked</span>
    </GkButton>
    <GkButton :loading="busy" variant="primary" @click="submit">
      Submit
    </GkButton>
    <GkButton href="https://example.com" target="_blank" rel="noopener noreferrer" variant="ghost">
      Link
    </GkButton>
  </div>
</template>

<style scoped>
.gk-doc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-3);
  align-items: center;
}
</style>

Readonly and disabled

Readonly keeps visual affordance while blocking clicks; disabled applies inactive styling.

vue

<script setup lang="ts">
import { GkButton } from 'god-kit/vue'
import { ref } from 'vue'

const readonly = ref(true)
</script>

<template>
  <div class="gk-doc-row">
    <GkButton :readonly="readonly" variant="secondary">
      Readonly
    </GkButton>
    <GkButton disabled variant="secondary">
      Disabled
    </GkButton>
  </div>
</template>

<style scoped>
.gk-doc-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gk-space-3);
  align-items: center;
}
</style>

API

Props

Prop	Type	Default	Description
type	'button' | 'submit' | 'reset'	'button'	HTML button type (ignored when href is set)
variant	'primary' | 'secondary' | 'ghost' | 'danger'	'primary'	Visual style
size	'sm' | 'md'	'md'	Padding and font size
disabled	boolean	false	Disables the control
block	boolean	false	Full width
loading	boolean	false	Loading overlay, blocks clicks, sets aria-busy
readonly	boolean	false	Blocks clicks without disabled styling; sets aria-disabled
slim	boolean	false	Tighter padding
stacked	boolean	false	Column layout for icon + label
href	string	—	If set, renders <a> instead of <button>
rel	string	—	Link rel (defaults to noopener noreferrer when target="_blank")
target	string	—	Link target
download	boolean | string	—	Anchor download attribute
loadingLabel	string	—	Passed to the default GkSpinner in the loader slot

Events

Event	Payload	Description
click	MouseEvent	Fired when the action is not blocked (disabled, readonly, or loading swallow the event)

Slots

Slot	Description
default	Label
prepend	Leading content (e.g. icon)
append	Trailing content
loader	Replaces default GkSpinner when loading is true

Examples

Each scenario under Live Examples includes a copyable Vue snippet (source is imported from the same SFC as the preview).

Accessibility notes

• Keep visible text in the default slot for clear action names.
• Use loadingLabel when your loading state needs a more specific spoken label.
• Prefer disabled for unavailable actions and readonly only when the action should remain visually active but non-interactive.

Related components

• GkForm
• GkDialog
• GkSnackbar