Banner

Description

A notice strip with an icon tile, a title and badge, a message, an action and a dismiss button

A Banner is a notice the user should read but does not have to answer: an IconTile saying what kind of notice it is, a title with an optional badge, a message under it, an action at the far end and a dismiss button after that.

It is a plain IComponent, so it renders wherever you put it — at the top of a page, in a card, above a list. It is also what a Toast floats over the page: Toast().Show(banner) shows the same strip in both places.

For a larger, centred empty-state block with an illustration, use Message; for a persistent inbox of notices, Notification Center.

Usage

Create one with Banner(title, message) — either argument may be left out and filled in later with SetTitle / SetText, each of which also takes a component.

Secondary() (the default), Primary(), Success(), Warning() and Danger() pick the tone, or pass a BannerStyle to Style(...). Every colour the strip draws is derived from that one accent: the wash behind it, its border, the tile, the badge and the text. Each tone brings a default icon, which any SetIcon call replaces, and NoIcon() drops the tile altogether.

Action(text, onClick) puts a button at the far end in the banner's own tone; the Action(IComponent) overload takes whatever you build instead. OnDismiss(onDismiss, hide: true) shows the dismiss button and takes the banner out of the page when it is pressed — pass hide: false when something else removes it — and Dismiss() does the same from code. Compact() tightens the strip and Flat() drops the rounding and side rules, for one pinned edge to edge across a page.

A title or message with nothing the line breaker can break at — a path, a URL, an id — breaks mid-run rather than growing the strip past its content box and running under the dismiss button.

using Transpose.Core;
using Tesserae;
using static Transpose.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = VStack().WS().Children(
                Banner("Indexing finished", "18 documents, 42 MB.")
                   .Success()
                   .SetIcon(UIcons.Download)
                   .Action("Open", () => console.log("open")),

                Banner("3 items need your review",
                       "They were flagged as high priority and are waiting in your queue.")
                   .Danger()
                   .SetIcon(UIcons.Flag)
                   .SetBadge("Priority")
                   .Action("Review now", () => console.log("review"))
                   .OnDismiss(() => console.log("dismissed")),

                Banner("Scheduled maintenance tonight, 23:00 - 01:00 UTC",
                       "Search stays available; indexing is paused for the window.")
                   .Primary(),

                Banner("Endpoint updated",
                       "POST to /api/endpoints/run/generation/assistant/generate-everything/version1")
                   .Secondary()
                   .Compact());

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component.Width(460.px()));
        }
    }
}

API reference

public enum BannerStyle

Secondary

Primary

Success

Warning

Danger

public sealed class Banner : ComponentBase<Banner, HTMLElement>

 Banner("3 items need your review", "They were flagged as high priority and are waiting in your queue.")
    .Danger()
    .SetIcon(UIcons.Fire)
    .SetBadge("Priority")
    .Action("Review now", () => OpenQueue())
    .OnDismiss(() => Remember("queue-banner-dismissed"));
 

public Banner(string title = null, string message = null)

internal Action DismissHandler { get; private set; }

internal bool HidesOnDismiss { get; private set; }

public BannerStyle CurrentStyle

public Banner Style(BannerStyle style)

public Banner Secondary()

public Banner Primary()

public Banner Success()

public Banner Warning()

public Banner Danger()

public Banner SetTitle(string title)

public Banner SetTitle(IComponent title)

public Banner SetText(string text)

public Banner SetText(IComponent text)

public Banner SetBadge(string text)

public Banner SetBadge(IComponent badge)

public Banner SetIcon(UIcons icon, string color = null, UIconsWeight weight = UIconsWeight.Regular)

public Banner SetIcon(string text, string color = null, TextSize? size = null)

public Banner SetIcon(IComponent iconOrImage, string color = null)

public Banner NoIcon()

public Banner Action(string text, Action onClick)

public Banner Action(IComponent action)

public Banner OnDismiss(Action onDismiss, bool hide = true)

public Banner Dismiss()

public Banner Compact(bool value = true)

public Banner Flat(bool value = true)

public override HTMLElement Render()

See also

• Toast — floats a banner over the page
• Icon Tile — the leading tile
• Message — the larger empty-state block
• Notification Center — a persistent inbox rather than a strip
• Component catalog