# Alert

Displays important messages to users with various styles and states.

### **Import**
```tsx
import { Alert } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Alert } from '@app-studio/web';

export const DefaultDemo = () => {
  return (
    <Alert
      title="Heads up!"
      description="You can add components to your app using the cli."
    />
  );
};
```

### **icon**
Custom icon element to display in the alert, overriding the default variant-based icon.

- **Type:** `ReactNode`

```tsx
import React from 'react';
import { EditIcon } from '@app-studio/web';
import { Alert } from '@app-studio/web';

export const IconDemo = () => {
  return (
    <Alert
      title="Heads up!"
      description="You can add components to your app using the cli."
      icon={<EditIcon widthHeight={24} color="black" />}
    />
  );
};
```

### **variant**
Determines the visual style and semantic meaning of the alert.

- **Type:** `string`
- **Default:** `default`
- **Possible Values:** `default, info, success, error, warning`

```tsx
import React from 'react';
import { Horizontal } from 'app-studio';
import { Alert } from '@app-studio/web';
import { Variant } from '@app-studio/web';

export const VariantDemo = () => (
  <Horizontal gap={10}>
    {['default', 'info', 'warning', 'success', 'error'].map((color, index) => (
      <Alert
        key={index}
        variant={color as Variant}
        title={'Heads Up!'}
        description={'You can add components to your app using the cli.'}
      />
    ))}
  </Horizontal>
);
```