Alert

The Alert component displays important messages to users. It supports types (info, success, warning, error), variants, custom icons, and dismiss behavior.

Import

import { Alert } from '@lazy-panda-ui/lazy-panda-ui';

Usage

Basic

function Basic() {
  return <Alert message="This is a basic info alert" />;
}

Types

function Types() {
  return (
    <>
      <Alert type="success" message="Operation completed successfully" />
      <Alert type="error" message="An error occurred" />
      <Alert type="warning" message="Please proceed with caution" />
      <Alert type="info" message="Here's some useful information" />
    </>
  );
}

Variants

function Variants() {
  return (
    <>
      <Alert message="Solid (default)" type="info" variant="solid" />
      <Alert message="Outlined" type="warning" variant="outlined" />
      <Alert message="Soft" type="success" variant="soft" />
    </>
  );
}

Dismissible + custom close icon

function Dismissible() {
  return (
    <Alert
      message="This alert can be dismissed"
      type="info"
      dismissible
      closeIcon={<Text>✕</Text>}
      onDismiss={() => console.log('Alert dismissed')}
    />
  );
}

With custom leading icon

import { Icon } from 'your-icon-library';

function WithIcon() {
  return <Alert message="Alert with custom icon" icon={<Icon name="bell" />} type="info" />;
}

Props

Main

Prop	Type	Default	Description
message	string	required	The message to display
type	'success' \	'info' \	'warning' \
variant	'solid' \	'outlined' \	'soft'
icon	React.ReactNode	-	Custom leading icon
dismissible	boolean	false	Whether the alert can be dismissed
closeIcon	React.ReactNode	-	Custom close icon when dismissible
onDismiss	() => void	-	Called when the alert is dismissed

Style props

Prop	Type	Description
containerStyle	StyleProp<ViewStyle>	Styles for the container
contentStyle	StyleProp<ViewStyle>	Styles for the content wrapper
messageStyle	StyleProp<TextStyle>	Styles for the message text
iconStyle	StyleProp<ViewStyle>	Styles for the icon wrapper

Accessibility

Prop	Type	Description
accessibilityRole	AccessibilityRole	Role for screen readers
accessibilityLabel	string	Accessibility label
testID	string	Test identifier

Theming

Alert is fully themeable via ThemeProvider tokens. Override only what you need.

import { ThemeProvider, createTheme } from '@lazy-panda-ui/lazy-panda-ui';

const customTheme = createTheme({
  alert: {
    padding: 16,
    borderRadius: 12,
    borderWidth: 1,
    iconSize: 20,
    type: {
      info: { bg: '#E0F2FE', fg: '#075985', border: '#7DD3FC' },
      success: { bg: '#DCFCE7', fg: '#166534', border: '#86EFAC' },
      warning: { bg: '#FEF9C3', fg: '#854D0E', border: '#FDE68A' },
      error: { bg: '#FEE2E2', fg: '#991B1B', border: '#FCA5A5' },
    },
  },
});

export function App() {
  return (
    <ThemeProvider theme={customTheme}>
      <Alert message="Themed alert" type="info" />
    </ThemeProvider>
  );
}

Notes:

• Variants: solid uses background, outlined uses border + transparent bg, soft uses surfaceVariant background.
• Handlers and styles are memoized for performance.