Banner

BannerElementProps

• collapsible

  Makes the content collapsible. A collapsible banner will conceal child elements initially, but allow the user to expand the banner to see them.

  boolean

• dismissible

  Determines whether the close button of the banner is present. When the close button is pressed, the `dismiss` event will fire, then `hidden` will be true, any animation will complete, and the `afterhide` event will fire.

  boolean

• heading

  The title of the banner.

  string

• hidden

  Determines whether the banner is hidden. If this property is being set on each framework render (as in 'controlled' usage), and the banner is `dismissible`, ensure you update app state for this property when the `dismiss` event fires. If the banner is not `dismissible`, it can still be hidden by setting this property.

  boolean

• id

  A unique identifier for the element.

  string

• tone

  Sets the tone of the Banner, based on the intention of the information being conveyed. The banner is a live region and the type of status will be dictated by the Tone selected. - `critical` creates an [assertive live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role) that is announced by screen readers immediately. - `neutral`, `info`, `success`, `warning` and `caution` creates an [informative live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) that is announced by screen readers after the current message.

  'success' | 'auto' | 'info' | 'warning' | 'critical'

export interface BannerElementProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'tone'> {
    tone?: Extract<BannerProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical'>;
}

BannerElementEvents

• afterhide

  Event handler when the banner has fully hidden. The `hidden` property will be `true` when this event fires.

  ((event: CallbackEventListener<typeof tagName>) => void) | null

• dismiss

  Event handler when the banner is dismissed by the user. This does not fire when setting `hidden` manually. The `hidden` property will be `false` when this event fires.

  ((event: CallbackEventListener<typeof tagName>) => void) | null

export interface BannerElementEvents {
    /**
     * Event handler when the banner has fully hidden.
     *
     * The `hidden` property will be `true` when this event fires.
     *
     * @implementation If implementations animate the hiding of the banner,
     * this event must fire after the banner has fully hidden.
     * We can add an `onHide` event in future if we want to provide a hook for the start of the animation.
     */
    afterhide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
    /**
     * Event handler when the banner is dismissed by the user.
     *
     * This does not fire when setting `hidden` manually.
     *
     * The `hidden` property will be `false` when this event fires.
     */
    dismiss?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
}

CallbackEventListener

(EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null

CallbackEvent

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}