Copy page

Components

DialogBordered

src/lib/components/ui/dialog-bordered.svelte

Purpose

Wraps ui/dialog to give the dialog a semantic severity color: either a colored top strip (default) or a full gradient border (tone="soft"). Use it anywhere a dialog must communicate its category at a glance — confirmations, error viewers, destructive actions, warnings.

Entity delete/restore confirmations must NOT use DialogBordered directly. Use the standard entity dialogs instead — they derive title and body copy from translation keys by convention. See Entity confirm dialogs.

Origin

Custom — thin wrapper around the in-repo ui/dialog (shadcn-svelte™ extended). Adds the severity accent and forwards open/children plus any bits-ui Dialog.Content props.

Usage

Default (primary top strip)

Code
<script lang="ts">
  import DialogBordered from "$lib/components/ui/dialog-bordered.svelte";
  let open = $state(false);
</script>

<DialogBordered bind:open>
  <h2 class="text-lg font-semibold">Confirm action</h2>
  <p class="text-sm text-muted-foreground">Are you sure?</p>
</DialogBordered>

Destructive (animated gradient strip)

Code
<DialogBordered bind:open severity="destructive" showCloseButton={false}>
  <h2 class="text-lg font-semibold">Delete cache entry</h2>
  <p class="text-sm text-muted-foreground">This action cannot be undone.</p>
</DialogBordered>

Soft tone (full gradient border, no top strip)

Code
<DialogBordered bind:open severity="primary" tone="soft">
  <p>Content framed by a full gradient border.</p>
</DialogBordered>

Props

Prop	Type	Default	Description
open	boolean (bindable)	—	Dialog visibility
severity	'primary' | 'info' | 'success' | 'warning' | 'destructive' | 'neutral'	'primary'	Accent color. warning/destructive animate the gradient.
tone	'' | 'soft'	''	'' = colored top strip; 'soft' = full-around gradient border.
showCloseButton	boolean	true	Forwarded to Dialog.Content
class	string	''	Extra classes on Dialog.Content
children	Snippet	required	Dialog body
...restProps	—	—	Pass-through of bits-ui Dialog.Content props (escapeKeydownBehavior, onInteractOutside, …) for persistent dialogs

Severity → accent map

severity	Accent
primary	sky-400 → indigo-400 gradient strip
info	sky-400 → blue-600 gradient strip
success	emerald-400 → emerald-600 gradient strip
warning	animated yellow gradient strip
destructive	animated rose→red gradient strip
neutral	solid neutral-500 strip

When to use which dialog

Case	Component
Delete/restore an entity record (single or bulk)	DeleteDialog / RestoreDialog / BulkDeleteDialog / BulkRestoreDialog — never DialogBordered directly
Destructive action on a non-entity thing (cache files, credentials, sessions)	DialogBordered severity="destructive" with a custom title
Non-destructive confirm / notice / detail viewer	DialogBordered with the matching severity
Generic content dialog with no semantic intent	plain ui/dialog

Next steps

• Entity confirm dialogs
• RFCErrorDialog
• Component catalog