Alert - Spektral UI

Variant

Position

Animate

Rounded

Dismissable

info

Info

Putting a turbojet engine on a train is not economical

lightbulb

Svelte

<!-- Info — top-center, slides in from bottom, auto-dismiss 5s, rounded -->
<!-- {#snippet children()} is implicit — content between the tags is rendered as children -->
<Alert variant="info" position="top-center" animate="bottom" duration={5} rounded>
    {#snippet leading()}
        <span class="material-symbols-outlined">info</span>
    {/snippet}
    <strong>Info</strong>
    <p>This design system has withstood 2000 years of trials.</p>
</Alert> 

API

Prop	Type	Default
variant	`"neutral" \| "info" \| "success" \| "warning" \| "error"`	`"info"`
position	`"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"`	`"bottom-right"`
rounded	`boolean`	`false`
animate	`"top" \| "bottom" \| "left" \| "right" \| false`	`false`
duration	`number`	`undefined`
dismissable	`boolean`	`false`
dismiss_label	`string`	`undefined`
style	`string`	`—`
leading	`Snippet`	`—`
children	`Snippet`	`—`
trailing	`Snippet`	`—`
ondismiss	`() => void`	`—`

Prop variant

Type "neutral" | "info" | "success" | "warning" | "error"

Default "info"

Prop position

Default "bottom-right"

Prop rounded

Type boolean

Default false

Prop animate

Type "top" | "bottom" | "left" | "right" | false

Default false

Prop duration

Type number

Default undefined

Prop dismissable

Type boolean

Default false

Prop dismiss_label

Type string

Default undefined

Prop style

Type string

Default —

Prop leading

Type Snippet

Default —

Prop children

Type Snippet

Default —

Prop trailing

Type Snippet

Default —

Prop ondismiss

Type () => void

Default —