Klarhimmel UI
Klarhimmel ↗

Banner

Stable

An inline message in the page flow: information, a notice or an error, with an optional next step.

npx shadcn add @klarhimmel/banner

When to use

  • Use for

    A message about the page or form it sits in, such as a notice or a failed save.

  • Not for

    A confirmation that can vanish. Use a Toast.

  • Pairs with

    Button, Text link, forms.

Preview

Booking confirmed

Your table at Exempelhotellet is reserved for Friday at 19:00.

Scheduled maintenance

The booking system is read-only on Sunday between 02:00 and 03:00.
banner.tsx
import { Theme } from '@/components/klarhimmel/theme/style';
import { Banner } from '@/components/klarhimmel/ui/banner';

export default function Example() {
  return (
    <Theme theme="brand">
      <Banner tone="error" title="Payment failed">
        The card was declined.
      </Banner>
    </Theme>
  );
}

Install

Import

import { Banner } from '@/components/klarhimmel/ui/banner';
Lands in
components/klarhimmel/ui/banner.tsx, plus cn() and the theme item if they are missing. Import theme.css after Tailwind.
Render in
Render it inside <Theme>, once near the root of your app. Tokens and fonts are scoped to it, so outside it the component is unstyled.

Examples

  • Actions

    Your trial ends in 3 days

    Add a payment method to keep your rooms and rates.
    Compare plans
    import { useState } from 'react';
import { Banner } from '@/components/klarhimmel/ui/banner';
import { Button } from '@/components/klarhimmel/ui/button';
import { TextLink } from '@/components/klarhimmel/ui/text-link';

export default function BannerActions() {
  const [shown, setShown] = useState(true);
  return (
    <div className="flex w-full max-w-xl flex-col gap-3">
      {shown ? (
        <Banner title="Your trial ends in 3 days" action={<TextLink href="#plans">Compare plans</TextLink>} onDismiss={() => setShown(false)}>
          Add a payment method to keep your rooms and rates.
        </Banner>
      ) : (
        <Button variant="secondary" onClick={() => setShown(true)}>Show the banner again</Button>
      )}
      <Banner tone="error" title="We could not save your changes" action={<Button size="sm" variant="secondary">Try again</Button>}>
        A very long reference such as booking-0f3a9c1e-77b2-4d1a-9c35-5e1f0b8a2c44-confirmation does not push the layout wider.
      </Banner>
    </div>
  );
}

  • Form

    Enter a full address, like [email protected].

    import { useState } from 'react';
import { Banner } from '@/components/klarhimmel/ui/banner';
import { Button } from '@/components/klarhimmel/ui/button';
import { Card } from '@/components/klarhimmel/ui/card';
import { Field, Input } from '@/components/klarhimmel/ui/input';

export default function BannerForm() {
  const [email, setEmail] = useState('maja@');
  const bad = !/^\S+@\S+\.\S+$/.test(email);
  return (
    <Card className="flex w-full max-w-md flex-col gap-4 p-5">
      {bad && <Banner tone="error" title="The booking could not be sent">Fix the email address below and send it again.</Banner>}
      {!bad && <Banner tone="info" title="Ready to send">The confirmation goes to {email}.</Banner>}
      <Field label="Email" error={bad ? 'Enter a full address, like [email protected].' : undefined}>
        {(p) => <Input type="email" value={email} onChange={(e) => setEmail(e.target.value)} {...p} />}
      </Field>
      <Button disabled={bad}>Send booking</Button>
    </Card>
  );
}

API reference

PropTypeDefaultDescription
tone'info' | 'neutral' | 'error''info'Error is announced at once (role=alert); the others wait (role=status).
titlestring-A short bold line.
childrenReactNode-The message.
actionReactNode-A Button or TextLink for the next step.
onDismiss() => void-Shows a close button.
dismissLabelstring'Dismiss'Accessible name of the close button; pass it translated.
classNamestring-Extra classes, merged after the component's own.

Accessibility

KeyDoes
TabMoves to the action and the close button
Enter / SpaceActivates the focused button

An error banner is announced at once; the others are announced politely.

Accessibility