Banner - Kumo Svelte

Installation

Barrel

import { Banner } from 'kumo-svelte';

Granular

import { Banner } from 'kumo-svelte/components/banner';

Usage

<script lang="ts">import { Banner } from "kumo-svelte";import { Info } from "phosphor-svelte";</script><Banner  icon={Info}  title="Update available"  description="A new version is ready to install."/>

Examples

Variants

Default

Alert

Error

Secondary

With icon

With action

With multiple actions

Custom content

API Reference

Prop	Type	Default	Description
icon	`Component`	-	Icon rendered before the banner content.
title	`string`	-	Primary heading text for the banner.
description	`string \| Snippet`	-	Secondary description content displayed below the title.
action	`Snippet`	-	Action snippet rendered at the trailing end in structured mode.
text	`string`	-	Deprecated simple banner text. Prefer title and description.
children	`Snippet`	-	Deprecated simple banner content. Prefer title and description.
variant	`'default' \| 'alert' \| 'error'`	`"default"`	Visual style of the banner.
class	`string`	-	Additional classes merged onto the root element.