mielui
Blocks

Notch

A small panel attached to a viewport edge. Show an update or ongoing activity while the page stays usable.

Installation

pnpm dlx @mielui/svelte add notch

Usage

Bind open on Root and set it to true to show the notch. Content holds any children, stays centered on the side you choose, and animates as its size changes. Header, Title, Description, Actions, Close, SideAction, Accessory, and Peek are optional. Close, a swipe, Escape, and the timer all set the same open binding back to false.

Keep Root mounted while it closes so Content can finish its exit. Set the panel width with a width class on Content; a tall panel stays inside the viewport and scrolls. The panel renders in the top layer, above clipping ancestors, and keeps the theme variables it inherits.

<script lang="ts">
    import { Button } from '@mielui/svelte/components/button';
    import * as Notch from '@mielui/svelte/components/notch';

    let open = $state(false);
</script>

<Button onclick={() => (open = true)}>Sync</Button>
<Notch.Root bind:open>
    <Notch.Content aria-label="Sync status">
        <Notch.Header>
            <Notch.Title>Everything is synced</Notch.Title>
            <Notch.Description>Your files are available on every device.</Notch.Description>
        </Notch.Header>
    </Notch.Content>
</Notch.Root>

Examples

Each edge

One notch opened from each edge of its own viewport, with a taller layout on the left and right.

Peek

mode="peek" keeps a slim handle at the edge. Hover, focus, or tap it to expand the notch; it collapses once the pointer leaves and focus is outside. Peek, placed beside Content, replaces the handle with a short indicator.

Side action and accessory

SideAction, placed beside Content, rests as an arc next to the panel and unfolds into a button when you hover or tap the panel or focus the action. Its side is end by default; on a top or bottom notch start and end mean left and right, on a side notch above and below. It is a Button with the panel variant and icon size, so it takes Button props; label it when it only holds an icon.

Accessory floats a counter or hint outside the panel: below a top notch, above a bottom notch, or toward the page for a side notch. Hovering or focusing it pauses the timer, and it hides with the notch. Here the action expands a file list and the panel resizes to fit.

Glass surface

surface="glass" on Root gives the panel a translucent, blurred background. Omit surface to inherit --mielui-surface from the theme, or set surface="solid" to keep this panel opaque.

Dismissal

A triggered notch closes on its own after duration, 5000 milliseconds by default. Hover and keyboard focus pause the countdown. Set duration={0} to keep it open until your application closes it.

Swiping toward the attached edge or pressing Escape while focus is inside also closes it; reversing a swipe before release keeps it open. On touch screens, start the swipe on Header so the body can still scroll. Add Close when the panel needs a visible dismiss button.

Focus and motion

Notch is nonmodal. Opening it does not move focus, lock scrolling, or make the page inert. Use Dialog for a decision that must interrupt the current task.

Title renders an h2; set level to fit the surrounding outline. Content does not announce updates on its own. Put a role="status" message inside when an update needs a polite announcement, keep interactive controls outside it, and do not repeat the same announcement in Accessory.

Entry, exit, and size changes use spring motion. Reduced motion settles the panel immediately. An interrupted exit reverses when open becomes true again.

Labels

Pass labels to Root to translate the accessible names of the close button and of the handle that expands a peeking notch. Every key of NotchLabels is optional; omitted keys keep the English text.

<script lang="ts">
    import * as Notch from '@mielui/svelte/components/notch';
    import type { NotchLabels } from '@mielui/svelte/components/notch';

    const labels: NotchLabels = {
        close: 'Fermer la notification',
        expand: 'Ouvrir la notification'
    };
</script>

<Notch.Root open {labels}>
    <Notch.Content aria-label="Synchronisation">
        <Notch.Title>Tout est synchronisé</Notch.Title>
        <Notch.Close />
    </Notch.Content>
</Notch.Root>

API reference

Notch.Root

  • labels
    NotchLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • open Bindable
    boolean

    Whether it is open. Bind it to control the state from outside.

    Default false

  • mode
    "triggered" | "peek"

    triggered opens fully. peek rests as a small handle that expands.

    Default 'triggered'

  • duration
    number

    Milliseconds it stays open before closing on its own.

    Default 5000

  • side
    "top" | "bottom" | "left" | "right"

    Viewport edge it attaches to.

    Default 'top'

  • surface
    "solid" | "glass"

    Surface treatment. Omit it to inherit --mielui-surface from the theme.

  • children
    Snippet<[]>

    Content rendered inside.

Notch.Peek

  • children
    Snippet<[]>

    Content rendered inside.

Notch.SideAction

  • disabled
    boolean

    Prevents activation. A disabled link loses its destination and is skipped by Tab.

  • variant
    ButtonVariant

    Visual style. Choose it for what the action means, not for decoration.

    Default 'panel'

  • size
    "sm" | "md" | "lg" | "icon"

    Control height. icon is a square button for a single icon.

    Default 'icon'

  • children
    Snippet<[]>

    Content rendered inside.

  • element Bindable
    HTMLButtonElement | HTMLAnchorElement

    Bindable reference to the rendered DOM element. Type is the union of the two possible element types -- narrow at the use site:

  • unstyled
    boolean

    Skip the variant/size base classes and render with class alone.

  • status
    ButtonStatus

    Controlled visual state. Loading remains focusable and refuses activation.

  • loading
    boolean

    Convenience alias for status="loading".

  • labels
    ButtonLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • onclick
    ((event: MouseEvent) => void)

    Called when the button is activated. Loading and disabled buttons do not call it.

  • onkeydown
    ((event: KeyboardEvent) => void)

    Called on key down, before the button handles the key itself.

  • href
    string

    Renders a link to this address instead of a button.

  • side
    "start" | "end"

    End of the panel the action sits on.

    Default 'end'

Notch.Title

  • level
    HeadingLevel

    Heading level in the surrounding document.

    Default 2

Other parts

These parts have no props of their own. They pass HTML attributes and events to their element.

  • Notch.Accessory
  • Notch.Actions
  • Notch.Close
  • Notch.Content
  • Notch.Description
  • Notch.Header