Banner

When to use

Banner shows a state that affects the whole app where everyone sees it: planned maintenance, a service outage, a block on the account, an important announcement.

When not to use

• About one section or form: Use InlineAlert.
• For the passing result of an action: Use Toast.
• For marketing messages: Use Banner only for states that affect work.

Anatomy

Uyarı: Maintenance is planned tonight from 23.00 to 01.00.Details

LightDark

Copy code

import { Banner, Link } from '@bigbang/ui';

export default function Default() {
  return (
    <Banner tone="warning" action={<Link href="#details">Details</Link>}>
      Maintenance is planned tonight from 23.00 to 01.00.
    </Banner>
  );
}

1. Tone icon.
2. Message: One sentence.
3. Action: An optional single link.
4. Close button: Optional.

Behaviour

• It sits at the very top of the app shell and pushes the content down.
• For a banner that appears later, turn on announce.
• On dismiss it fades, is removed and focus moves to the next control.

Guidelines

• Show at most one banner at a time.
• Write the message as one sentence with a concrete time.
• Keep banners about outages and blocks non-dismissible.

Content

Turkish	English
Bu gece 23.00 ile 01.00 arasında bakım yapılacak.	Maintenance is planned tonight from 23.00 to 01.00.
Ayrıntılar	Details

Related components

• InlineAlert: A message in the content.
• Toast: The passing result of an action.
• Link: The banner action.