Banner

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Default() {
6  return (
7    <Banner>
8      <Banner.Content>
9        <Banner.Title>New feature available</Banner.Title>
10        <Banner.Description>Check out the latest updates we just shipped.</Banner.Description>
11      </Banner.Content>
12      <Banner.Action href="#changelog">Learn more</Banner.Action>
13    </Banner>
14  );
15}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Info() {
6  return (
7    <Banner variant="info">
8      <Banner.Content>
9        <Banner.Title>Info</Banner.Title>
10        <Banner.Description>This is an informational banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Warning() {
6  return (
7    <Banner variant="warning">
8      <Banner.Content>
9        <Banner.Title>Warning</Banner.Title>
10        <Banner.Description>This is a warning banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Danger() {
6  return (
7    <Banner variant="danger">
8      <Banner.Content>
9        <Banner.Title>Danger</Banner.Title>
10        <Banner.Description>This is a danger banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

1'use client';
2
3import { Banner } from '@/components/ui/banner';
4
5export function Success() {
6  return (
7    <Banner variant="success">
8      <Banner.Content>
9        <Banner.Title>Success</Banner.Title>
10        <Banner.Description>This is a success banner.</Banner.Description>
11      </Banner.Content>
12    </Banner>
13  );
14}

1'use client';
2
3import { useState } from 'react';
4import { Banner } from '@/components/ui/banner';
5
6export function Dismissible() {
7  const [key, setKey] = useState(0);
8
9  return (
10    <div className="flex w-full flex-col gap-3">
11      <Banner key={key} variant="info" onClose={() => {}}>
12        <Banner.Content>
13          <Banner.Title>Dismissible banner</Banner.Title>
14          <Banner.Description>Click the close button to dismiss this banner.</Banner.Description>
15        </Banner.Content>
16      </Banner>
17      <button
18        type="button"
19        onClick={() => setKey((k) => k + 1)}
20        className="text-muted-foreground hover:text-foreground w-fit text-sm underline transition-colors"
21      >
22        Reset banner
23      </button>
24    </div>
25  );
26}