Skip to main content
The Banner API is experimental and may change in the future. It has been marked as @deprecated to remind the developer that it is experimental. It is not "deprecated", just experimental. Please don't use it in production versions of your app. We do not guarantee backward compatibility, or that the API will remain stable.
import {Experimental_Banner} from "attio/client"
TypeScript
import React from "react";
import { Experimental_Banner } from "attio/client";

export function HelloWorldDialog() {
	return (
      <>
          <Experimental_Banner
              variant="neutral"
              actions={[
                  {label: "Secondary action", variant: "secondary", onTrigger: () => {}},
                  {label: "Primary action", variant: "primary", onTrigger: () => {}},
              ]}
          >
              Some important information with two actions
          </Experimental_Banner>
      </>
  );
}

​
Props

​
children
string
required
The text of the banner.Only text is allowed.
​
variant
'neutral' | 'warning' | 'error'
required
The variant of the banner.
​
actions
Array<{ label: string, variant: 'primary' | 'secondary', onTrigger: () => Promise<void> | void }>
Optional actions to include.
⌘I