Banner

import { Banner } from '@hanzo/ui'

export function Default() {
  return <Banner>A new version of the app is available.</Banner>
}

export function Dismissible() {
  const [open, setOpen] = useState(true)
  return (
    <YStack gap="$3" items="flex-start" width="100%">
      {open ? (
        <Banner variant="info" onClose={() => setOpen(false)}>
          <svg viewBox="0 0 24 24" width={16} height={16} fill="none" stroke="currentColor" strokeWidth={2}>
            <circle cx={12} cy={12} r={10} />
            <path d="M12 16v-4M12 8h.01" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
          Scheduled maintenance runs tonight from 2am to 3am UTC.
        </Banner>
      ) : (
        <Button variant="outline" onPress={() => setOpen(true)}>
          Show the banner again
        </Button>
      )}
    </YStack>
  )
}

export function Variants() {
  return (
    <YStack gap="$2">
      <Banner>Default banner.</Banner>
      <Banner variant="info">Informational banner.</Banner>
      <Banner variant="success">Your changes were saved.</Banner>
      <Banner variant="warning">Your trial ends in three days.</Banner>
      <Banner variant="error">Payment failed — update your billing details.</Banner>
    </YStack>
  )
}

Types

export type BannerVariant = 'default' | 'info' | 'success' | 'warning' | 'error'

export type BannerProps = Omit<ComponentProps<typeof BannerFrame>, 'variant'> & {
  variant?: BannerVariant | null
  onClose?: () => void
}

Exports