Banner

The strip over a view: one line and the buttons that answer it. Use it for anything that waits for a person, such as a conflict, a failure or a request. A toast is for what a person may read after the fact.

import { Banner } from '@adecore/ui';

import { useState } from 'react';
import { CircleAlert, GitMerge } from 'lucide-react';
import { Banner, Button } from '@adecore/ui';

export default function BannerDemo() {
    const [resolved, setResolved] = useState(false);

    return (
        <div className="relative flex h-48 w-full items-end justify-center rounded-lg bg-surface-sunken p-4">
            {resolved ? (
                <Banner icon={CircleAlert} tone="neutral" message="The merge finished." />
            ) : (
                <Banner icon={GitMerge} tone="attention" message="Two files have conflicts.">
                    <Button size="sm" variant="primary" onClick={() => setResolved(true)}>
                        Resolve
                    </Button>
                    <Button size="sm">Abort</Button>
                </Banner>
            )}
            <Button size="sm" variant="secondary" onClick={() => setResolved(false)}>
                Start over
            </Button>
        </div>
    );
}

By default it floats centered along the top of its positioned parent. Show one at a time. The banner is a polite live region, so a screen reader announces a new line.

In the flow of a page

With placement="inline" the banner stands in the flow and fills its row without a shadow, such as a warning above a table. Its className adds margins and the like.

import { TriangleAlert } from 'lucide-react';
import { Banner, Button } from '@adecore/ui';

export default function BannerInlineDemo() {
    return (
        <div className="flex w-full flex-col gap-3">
            <Banner
                placement="inline"
                icon={TriangleAlert}
                tone="attention"
                message="Request duration hit the limit of 1,000 series. New combinations go to one overflow series."
            >
                <Button size="sm">Show attributes</Button>
            </Banner>
            <div className="h-24 rounded-lg border border-border bg-surface-sunken" />
        </div>
    );
}

On the overlay, a className replaces the floating position.

Props

Prop	Type	Default
icon	LucideIcon		Required.
tone	BannerTone		Required. 'attention' | 'error' | 'neutral' colors the icon.
message	ReactNode		Required.
children	ReactNode		The buttons.
placement	'overlay' | 'inline'	'overlay'	Floats over the view, or stands in the flow and fills its row.
className	string		On the overlay, replaces its position.
ref	Ref<HTMLDivElement>

BannerProps and BannerTone are exported types.