<Banner />

A component displaying important information to the user.

import {Banner} from "attio/client"

TypeScript

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

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.