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 demo

Neutral message.

Info message.

Success message.

Warning message.

Danger message.

With title

Supporting line from the text prop.

Closable

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

Prominent

Extra padding for emphasis.

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

Basic

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

<template>
  <GkAlert variant="success">Saved.</GkAlert>

  <GkAlert
    v-model="open"
    variant="info"
    title="Heads up"
    text="Details here."
    closable
    border="start"
  />
</template>

Advanced

<GkAlert
  v-model="open"
  variant="warning"
  title="Quota warning"
  text="Storage usage is near the limit."
  closable
  border="start"
/>

Edge case

<GkAlert role="alert" variant="danger">
  Critical payment sync failed.
</GkAlert>

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