Alert

Alert shows inline feedback with semantic types, optional border, built-in icons, and closable behavior that matches Card (gk-close only).

Demos

Basic

Types: default, info, success, warning, and error. Each type sets color and the built-in icon.

Neutral inline feedback.Helpful context for the user.The operation completed.Something needs attention.Something went wrong.

<gk-alert type="default" title="Default">Neutral inline feedback.</gk-alert>
<gk-alert type="info" title="Info">Helpful context for the user.</gk-alert>
<gk-alert type="success" title="Success">The operation completed.</gk-alert>
<gk-alert type="warning" title="Warning">Something needs attention.</gk-alert>
<gk-alert type="error" title="Error">Something went wrong.</gk-alert>

Bordered

Set bordered for a border around the soft fill (default is fill only).

Soft fill plus a border around the alert.

<gk-alert bordered type="info" title="Bordered">
  Soft fill plus a border around the alert.
</gk-alert>

Closable

closable shows a close control that dispatches bubbling gk-close. The alert does not hide itself — handle the event in the host.

Close emits gk-close; hide or remove the alert in the host.

<!-- host: const alertVisible = ref(true); function onAlertClose() { alertVisible.value = false } -->
<gk-alert
  v-if="alertVisible"
  type="success"
  title="Closable"
  closable
  @gk-close="onAlertClose"
>
  Close emits gk-close; hide or remove the alert in the host.
</gk-alert>

Icon

Put content in the icon slot to override the built-in type icon.

The icon slot overrides the built-in type icon.

<gk-alert type="info" title="Custom icon">
  <svg slot="icon" width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M12 2 2 7l10 5 10-5-10-5Zm0 9.2L4.2 7.4 12 3.5l7.8 3.9L12 11.2Zm0 2.1 8-4v7.2c0 1.1-3.6 2.5-8 2.5s-8-1.4-8-2.5V9.3l8 4Z"/>
  </svg>
  The icon slot overrides the built-in type icon.
</gk-alert>

No icon

Bind :show-icon="false" to hide the icon column.

Icon column hidden when show-icon is false.

<gk-alert type="warning" title="No icon" :show-icon="false">
  Icon column hidden when show-icon is false.
</gk-alert>

API

Alert Props

Prop	Type	Default
type	'default' | 'info' | 'success' | 'warning' | 'error'	'default'
title	string	—
bordered	boolean	false
closable	boolean	false
show-icon	boolean	true

Alert Slots

Name	Description
default	Body content
icon	Overrides the built-in type icon when present

Alert Events

Name	Description
gk-close	Close button activated; bubbles; composed: true

CSS Parts

Part	Description
base	Outer surface
icon	Icon column
body	Title + content wrapper
title	Title line
content	Default slot wrapper
close	Close button