Message

Message shows global toast feedback via an imperative API. Wrap the app (or each demo) in <gk-message-provider>; call gkMessage to create, update lifecycle with destroy() / destroyAll(). Unlike Alert, Message owns its lifecycle and removes itself from the queue.

Demos

Basic

Trigger gkMessage.info, success, warning, and error. Requires a connected gk-message-provider.

InfoSuccessWarningError

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('Informational message')">Info</gk-button>
  <gk-button @click="() => gkMessage.success('Saved successfully')">Success</gk-button>
  <gk-button @click="() => gkMessage.warning('Please check your input')">Warning</gk-button>
  <gk-button @click="() => gkMessage.error('Something went wrong')">Error</gk-button>
</gk-message-provider>

Types

Types: default, info, success, warning, error, and loading. Loading defaults to no auto-dismiss; this demo destroys the handle after 2s.

DefaultInfoSuccessWarningErrorLoading (2s)

<gk-message-provider>
  <gk-button @click="() => gkMessage.create('Default message')">Default</gk-button>
  <gk-button @click="() => gkMessage.info('Informational message')">Info</gk-button>
  <gk-button @click="() => gkMessage.success('Saved successfully')">Success</gk-button>
  <gk-button @click="() => gkMessage.warning('Please check your input')">Warning</gk-button>
  <gk-button @click="() => gkMessage.error('Something went wrong')">Error</gk-button>
  <gk-button @click="() => {
    const h = gkMessage.loading('Loading…');
    window.setTimeout(() => h.destroy(), 2000);
  }">Loading (2s)</gk-button>
</gk-message-provider>

Closable

Pass { closable: true } per call (or set closable on the provider). Close removes the message from the queue.

Closable message

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('You can dismiss this', { closable: true, duration: 0 })">
    Closable message
  </gk-button>
</gk-message-provider>

Duration

Override duration per call. Provider default is 3000 ms; 0 means no auto-dismiss.

1 secondDuration 0

<gk-message-provider>
  <gk-button @click="() => gkMessage.success('Disappears in 1s', { duration: 1000 })">
    1 second
  </gk-button>
  <gk-button @click="() => gkMessage.warning('Stays until closed', { duration: 0, closable: true })">
    Duration 0
  </gk-button>
</gk-message-provider>

Placement

Set placement on this demo’s provider only. Values: top, top-left, top-right, bottom, bottom-left, bottom-right.

Bottom right

<gk-message-provider placement="bottom-right">
  <gk-button @click="() => gkMessage.info('Bottom-right placement')">
    Bottom right
  </gk-button>
</gk-message-provider>

Destroy all

gkMessage.destroyAll() dismisses every message on the active provider.

InfoSuccessWarningDestroy all

<gk-message-provider>
  <gk-button @click="() => gkMessage.info('Informational message')">Info</gk-button>
  <gk-button @click="() => gkMessage.success('Saved successfully')">Success</gk-button>
  <gk-button @click="() => gkMessage.warning('Please check your input')">Warning</gk-button>
  <gk-button @click="() => gkMessage.destroyAll()">Destroy all</gk-button>
</gk-message-provider>

API

gk-message-provider Props

Prop	Type	Default
placement	'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'	'top'
duration	number	3000
closable	boolean	false
keep-alive-on-hover	boolean	false
max	number	—

gk-message-provider Slots

Name	Description
default	Application / page content

gkMessage

Imported from @gk-ui/core. Requires a connected <gk-message-provider>.

Method	Signature	Notes
create	(content: string, options?: GkMessageOptions) => GkMessageReactive	Generic create
info	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'info'
success	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'success'
warning	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'warning'
error	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'error'
loading	(content: string, options?: GkMessageOptions) => GkMessageReactive	type: 'loading'; default duration: 0
destroyAll	() => void	Dismiss all on the active provider

GkMessageOptions: type, duration, closable, keepAliveOnHover, showIcon (default true).

GkMessageReactive: { destroy: () => void }.

gk-message Props

Prop	Type	Default
type	'default' | 'info' | 'success' | 'warning' | 'error' | 'loading'	'default'
content	string	''
closable	boolean	false
show-icon	boolean	true

gk-message Events

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

CSS Parts (gk-message)

Part	Description
base	Outer surface
icon	Icon / spinner column
content	Text content
close	Close button