> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# <Banner />

> A component displaying important information to the user.

<img className="dark:hidden" width="720" height="440" noZoom src="https://mintcdn.com/attio/mIpDpv9JkHHGjpdU/images/banner.png?fit=max&auto=format&n=mIpDpv9JkHHGjpdU&q=85&s=235a7d8caea1ba5d29229d2d02dd8874" data-path="images/banner.png" />

<img className="hidden dark:block" width="720" height="440" noZoom src="https://mintcdn.com/attio/mIpDpv9JkHHGjpdU/images/banner-dark.png?fit=max&auto=format&n=mIpDpv9JkHHGjpdU&q=85&s=b50b4b775872eecb67b032fa1d6f864d" data-path="images/banner-dark.png" />

```js theme={"system"}
import {Banner} from "attio/client"
```

```tsx TypeScript theme={"system"}
import React from "react"
import {Banner} from "attio/client"

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

## Props

<ParamField path="children" type="string" required>
  The text of the banner.

  Only text is allowed.
</ParamField>

<ParamField path="variant" type="'neutral' | 'warning' | 'error'" required>
  The variant of the banner.
</ParamField>

<ParamField path="actions" type="Array<{ label: string, variant: 'primary' | 'secondary', onTrigger: () => Promise<void> | void }>">
  Optional actions to include.
</ParamField>