Alert

Beta

Displays contextual feedback messages for success, info, warning, or error states.

Installation

npm install @xaui/native

Import

import { Alert } from '@xaui/native/alert'

Basic Usage

Minimal example showing the component with its default configuration.

import { Alert } from '@xaui/native/alert'

export function Example() {
  return <Alert />
}

Theme Colors

Use themeColor to convey semantic meaning.

import { Alert } from '@xaui/native/alert'
import { Column } from '@xaui/native/view'

export function ThemeColorsExample() {
  return (
    <Column gap={8}>
      <Alert title="Success" description="Your changes have been saved." themeColor="success" />
      <Alert title="Warning" description="Your session is about to expire." themeColor="warning" />
      <Alert title="Danger" description="An error occurred. Please try again." themeColor="danger" />
      <Alert title="Info" description="A new version is available." themeColor="primary" />
      <Alert title="Default" description="Nothing special here." themeColor="default" />
    </Column>
  )
}

Variants

All visual styles combined with a theme color.

import { Alert } from '@xaui/native/alert'
import { Column } from '@xaui/native/view'

export function VariantsExample() {
  return (
    <Column gap={8}>
      <Alert title="Flat" description="Default flat style." variant="flat" themeColor="success" />
      <Alert title="Solid" description="High contrast." variant="solid" themeColor="success" />
      <Alert title="Bordered" description="Outlined style." variant="bordered" themeColor="success" />
      <Alert title="Faded" description="Subtle background." variant="faded" themeColor="success" />
    </Column>
  )
}

Closable Alert

Let users dismiss the alert.

import { useState } from 'react'
import { Alert } from '@xaui/native/alert'

export function ClosableExample() {
  const [visible, setVisible] = useState(true)

  return (
    <Alert
      title="Update available"
      description="Restart the app to apply the latest update."
      themeColor="primary"
      isClosable
      isVisible={visible}
      onClose={() => setVisible(false)}
    />
  )
}

With Custom Icon

Replace the default icon with a custom element.

import { Alert } from '@xaui/native/alert'
import { Typography } from '@xaui/native/typography'

export function CustomIconExample() {
  return (
    <Alert
      title="Tip"
      description="Long-press any item to see more options."
      themeColor="secondary"
      icon={<Typography>💡</Typography>}
    />
  )
}