Feedback

UIAlert

A notice inside the page, in four tones besides the neutral one. danger uses role="alert"; the others, note. Choose status to announce a change, or none when it is already inside a live region.

New version

UI 1.8 uses the --ui-* tokens.

Changes saved

They are already published.

Translation pending

This page is not in English yet.

Could not publish

The database does not respond.

meeko

<UIAlert tone="success" title="Changes saved" description="They are already published." />
<UIAlert tone="danger" title="Could not publish" dismiss on:dismiss="clear">
  <p>The database does not respond.</p>
  <snippet name="actions"><UIButton size="sm" on:click="retry">Retry</UIButton></snippet>
</UIAlert>

UIAlert props
Name	Type / default	Description
`tone`	`neutral \| info \| success \| warning \| danger` neutral	Meaning of the notice.
`title / description`	`string`	Title and text.
`role`	`alert \| status \| note \| none` alert with danger; note	How a screen reader announces it.
`dismiss / closeLabel`	`boolean / string` false	Close button, with its accessible name.
`icon`	`Snippet`	Icon, as a prop or as a snippet.
`class`	`string`	Additional classes.

It accepts the default, icon and actions snippets, and the dismiss event.

UIToast

A short notice floating over the page. It is a manual popover: it does not take the focus. useToast() is auto-imported and adds notices from a client action, never during SSR. It needs UIApp at the root.

meeko

<script lang="ts">
  const toast = useToast()
</script>

<template>
  <UIButton on:click="() => toast.add({ text: 'Changes saved', tone: 'success', duration: 5000 })">
    Save
  </UIButton>
</template>

toast.add options and UIToast props
Name	Type / default	Description
`text`	`string`	Required. The notice.
`tone`	`neutral \| info \| success \| warning \| danger` neutral	Meaning of the notice.
`duration`	`number` 5000	Milliseconds before it closes; 0 keeps it until it is closed. The count pauses with the pointer or the focus inside.
`closeLabel`	`string`	Accessible name of the close button.
`actions`	`Snippet`	Actions of the notice.

add returns an id for remove(id); clear() closes them all. UIToast can also be used declaratively, with the dismiss event.

UIEmpty

What shows when there is nothing. inline for a list, panel for a whole view.

No projects

Create the first one to start.

No results.

No filter matches.

UIEmpty props
Name	Type / default	Description
`title`	`string` No results.	Title. The default value follows the language of the document.
`description`	`string`	What to do next.
`variant`	`inline \| panel` inline	Size of the empty space.
`class`	`string`	Additional classes.

It accepts the default and actions snippets.

UISkeleton

The shape of the content while it arrives. It announces the load once and respects reduced motion.

meeko

<UIEmpty variant="panel" title="No projects" description="Create the first one to get started.">
  <snippet name="actions"><UIButton>Create project</UIButton></snippet>
</UIEmpty>
<UISkeleton bind:lines="3" bind:widths="['full', 'long', 'short']" />

UISkeleton props
Name	Type / default	Description
`lines`	`number` 3	Number of lines.
`widths`	`readonly (full \| long \| short)[]`	Width of each line.
`label`	`string` Loading	What it announces. The default value follows the language of the document.
`class`	`string`	Additional classes.

The default texts are in ui.messages.<language>.feedback (see Theming). The types UIAlertProps, UIToastProps, UIToastContext, UIEmptyProps and UISkeletonProps are exported from @meekojs/ui/runtime.

Contents

UIAlert

UIToast

UIEmpty

UISkeleton

Was this page helpful?