GkAlert

Non-modal status region. Default role="status"; use role="alert" for urgent, interruptive messages.

When to use

Use for inline status feedback that should remain visible in page flow, such as validation summaries or save results.

Live Examples

Variants

Neutral through danger; use role alert only when the message is urgent.

Neutral message.

Info message.

Success message.

Warning message.

Danger message.

vue

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

<template>
  <div class="gk-doc-stack">
    <GkAlert variant="neutral">
      Neutral message.
    </GkAlert>
    <GkAlert variant="info">
      Info message.
    </GkAlert>
    <GkAlert variant="success">
      Success message.
    </GkAlert>
    <GkAlert variant="warning">
      Warning message.
    </GkAlert>
    <GkAlert variant="danger" role="alert">
      Danger message.
    </GkAlert>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3);
}
</style>

Title, text, and border accent

Props for heading and body plus a start-edge accent bar.

With title

Supporting line from the text prop.

vue

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

<template>
  <GkAlert
    variant="info"
    title="With title"
    text="Supporting line from the text prop."
    border="start"
  />
</template>

Closable

v-model controls visibility after dismiss.

Closable

Dismiss sets v-model to false and removes the alert.

vue

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

const closableOpen = ref(true)
</script>

<template>
  <div class="gk-doc-stack">
    <GkAlert
      v-model="closableOpen"
      variant="success"
      title="Closable"
      closable
      border
    >
      Dismiss sets <code>v-model</code> to <code>false</code> and removes the alert.
    </GkAlert>
    <p v-if="!closableOpen" class="gk-doc-demo-reset">
      <button type="button" class="gk-doc-link-button" @click="closableOpen = true">
        Show closable example again
      </button>
    </p>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3);
}

.gk-doc-demo-reset {
  margin: 0;
}

.gk-doc-link-button {
  font: inherit;
  color: var(--gk-color-primary, LinkText);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
</style>

Prominent

Larger padding and top border for high-visibility callouts.

Prominent

Extra padding for emphasis.

vue

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

<template>
  <GkAlert variant="warning" prominent title="Prominent" border="top">
    Extra padding for emphasis.
  </GkAlert>
</template>

API

Props

Prop	Type	Default	Description
modelValue	boolean	true	Visibility; when false, the component renders nothing
variant	'neutral' | 'info' | 'success' | 'warning' | 'danger'	'neutral'	Tone (primary API)
type	'success' | 'info' | 'warning' | 'error'	—	Optional alias when variant is default neutral; error maps to danger
role	'status' | 'alert'	'status'	ARIA role
title	string	—	Heading line (overridden by title slot)
text	string	—	Body line after the title (overridden by text slot)
closable	boolean	false	Show a dismiss control (GkButton ghost, small)
closeLabel	string	'Dismiss'	aria-label for the close control
border	boolean | 'top' | 'end' | 'bottom' | 'start'	—	Accent bar along an edge; true uses logical start
prominent	boolean	false	Larger padding / min-height

Slots

Slot	Description
prepend	Optional start-aligned content (e.g. icon)
append	Optional end-aligned content before the close control
title	Title row (wins over title prop)
text	Text row after title (wins over text prop)
default	Additional body after title and text

Order: optional title (prop or slot), then text (prop or slot), then default slot.

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when dismissed; false when closing
close	MouseEvent	Close control activated
click:close	MouseEvent	Same as close (mirrors common naming)

Examples

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

Accessibility notes

• Use role=\"alert\" only for urgent interruptions; keep non-urgent updates as status.
• Provide clear, actionable message text and avoid icon-only communication.

Related components

• GkSnackbar
• GkButton
• GkField