AlertBanner

Warning, an alert is coming.

Example

Props

🕹️ standard props
title
string
The title text for the alert banner
undefined
description
string
The description text for the alert banner
undefined
disabled
boolean
Whether the alert banner is disabled and non-interactive
false
class
{ container?: string, border?: string, body?: string }
Custom CSS classes for the alert banner container, border, and body
undefined
🎨 style props
--alert-banner-border-radius
size
Border radius for the alert banner
5px
--alert-banner-color
color
Color for the alert banner
var(--my-var-blue)
--alert-banner-border-width
size
Width of the border on the alert banner
.7rem
--alert-banner-padding-left
size
Padding on the left side of the alert banner
.5rem
--alert-banner-padding-top
size
Padding on the top of the alert banner
.3rem
--alert-banner-padding-bottom
size
Padding on the bottom of the alert banner
.3rem
--alert-banner-padding-right
size
Padding on the right side of the alert banner
.3rem
--alert-banner-cursor
string
Cursor style for the alert banner
pointer
--alert-banner-width
size
Width of the alert banner
100%

Slots

contentSnippet

A snippet to customize the content of the alert banner

Default content:

{#if !!title}
  {#if !!titleSnippet}
    {@render titleSnippet({ title })}
  {:else}
    <div class="title">{title}</div>
  {/if}
{/if}
{#if !!description}
  {#if !!descriptionSnippet}
    {@render descriptionSnippet({ description })}
  {:else}
    <div class="description">{description}</div>
  {/if}
{/if}
        

Available variables:

Name	Type	Description
title	string	The title of the alert banner
description	string	The description of the alert banner

titleSnippet

A snippet to customize the title of the alert banner

Default content:

<div class="title">{title}</div>

Available variables:

Name	Type	Description
title	string	The title of the alert banner

descriptionSnippet

A snippet to customize the description of the alert banner

Default content:

<div class="description">{description}</div>

Available variables:

Name	Type	Description
description	string	The description of the alert banner

appendSnippet

A snippet to append additional content to the alert banner

Available variables:

Name	Type	Description
disabled	boolean	Whether the additional content should be disabled

Events

onclick

Triggered when the alert banner is clicked

Attribute	Type	Description
nativeEvent	MouseEvent	The native mouse click event

onkeypress

Triggered when a key is pressed while focusing on the alert banner

Attribute	Type	Description
nativeEvent	KeyboardEvent	The native keyboard event