Alert

Migration guide for Alert from HeroUI v2 to v3

Structure Changes

In v2, Alert was a single component that accepted props for title, description, icon, and other elements:

1import { Alert } from "@lenso/ui";2
3export default function App() {4  return (5    <Alert 6      title="This is an alert"7      description="Thanks for subscribing to our newsletter!"8    />9  );10}

In v3, Alert uses a compound component pattern with explicit subcomponents:

1import { Alert } from "@lenso/ui";2
3export default function App() {4  return (5    <Alert>6      <Alert.Indicator />7      <Alert.Content>8        <Alert.Title>This is an alert</Alert.Title>9        <Alert.Description>10          Thanks for subscribing to our newsletter!11        </Alert.Description>12      </Alert.Content>13    </Alert>14  );15}

Key Changes

1. Component Structure

v2: Single Alert component with props
v3: Compound components: Alert, Alert.Indicator, Alert.Content, Alert.Title, Alert.Description

2. Color/Status Props

3. Variants Removed

v2 Variants: solid, bordered, flat, faded
v3: No variant prop - use Tailwind CSS classes to achieve similar effects

To achieve v2 variant styles in v3:

• v2 solid → v3 status + add background color classes
• v2 bordered → v3 status + add border classes
• v2 flat → v3 default (no additional classes needed)
• v2 faded → v3 status + add opacity/background classes

4. Prop Changes

5. Icon Handling

v2: Used icon prop or hideIcon prop
v3: Use <Alert.Indicator /> with custom children or omit it entirely

Migration Examples

Icon Handling

1import { Icon } from '@iconify/react';2
3{/* With custom icon */}4<Alert 5  icon={<Icon icon="gravity-ui:box" />}6  title="Custom Icon Alert"7/>8
9{/* Without icon */}10<Alert hideIcon title="No Icon Alert" />

With Action Button (End Content)

1import { Alert, Button } from "@lenso/ui";2
3<Alert4  title="You have no credits left"5  description="Upgrade to a paid plan to continue"6  endContent={7    <Button color="warning" size="sm" variant="flat">8      Upgrade9    </Button>10  }11/>

Closable Alert

1<Alert2  title="Closable Alert"3  isClosable4  onClose={() => console.log("Closed")}5/>

Styling Changes

v2: classNames Prop

1<Alert 2  classNames={{3    base: "custom-base",4    title: "custom-title",5    description: "custom-description"6  }}7/>

v3: Direct className Props

1<Alert className="custom-base">2  <Alert.Indicator />3  <Alert.Content>4    <Alert.Title className="custom-title">Title</Alert.Title>5    <Alert.Description className="custom-description">6      Description7    </Alert.Description>8  </Alert.Content>9</Alert>

Component Anatomy

The v3 Alert follows this structure:

1Alert (Root)2  ├── Alert.Indicator (optional)3  ├── Alert.Content (optional)4  │   ├── Alert.Title (optional)5  │   └── Alert.Description (optional)6  └── [Additional content like buttons, close button, etc.] (optional)

Summary

1. Component Structure: Must use compound components instead of props
2. Color → Status: color prop renamed to status, primary → accent, secondary → default
3. Variants Removed: No variant prop; use Tailwind CSS classes
4. Radius Removed: No radius prop; use Tailwind CSS classes
5. No Built-in Close Button: Must add CloseButton manually
6. No Visibility Control: Handle visibility with conditional rendering
7. No Start/End Content Props: Place content directly in the component tree
8. Icon Handling: Use <Alert.Indicator /> with children or omit it