Skip to content
Docs

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Alert } from "@hua-labs/hua";

v2.0.0

variant"default" | "success" | "warning" | "error" | "info""default"docs:components.alert.props.variant
titlestring-docs:components.alert.props.title
descriptionstring-docs:components.alert.props.description
iconReact.ReactNode-docs:components.alert.props.icon
actionReact.ReactNode-docs:components.alert.props.action
closablebooleanfalsedocs:components.alert.props.closable
onClose() => void-docs:components.alert.props.onClose
childrenReact.ReactNode-docs:components.alert.props.children

AlertSuccess

variant="success"

AlertWarning

variant="warning"

AlertError

variant="error"

AlertInfo

variant="info"

docs:common.basicUsagetsx
1import { Alert } from '@hua-labs/hua';
2 
3<Alert
4  variant="info"
5  title="Information"
6  description="This is an informational message."
7/>
docs:common.withCloseButtontsx
1<Alert
2  variant="warning"
3  title="Warning"
4  description="This action cannot be undone."
5  closable
6  onClose={() => setShowAlert(false)}
7/>
docs:common.withActiontsx
1<Alert
2  variant="error"
3  title="Payment Failed"
4  description="Your payment could not be processed."
5  action={<Button size="sm" variant="outline">Retry</Button>}
6/>
docs:common.convenienceComponentstsx
1import { AlertSuccess, AlertWarning, AlertError, AlertInfo } from '@hua-labs/hua';
2 
3<AlertSuccess title="Success!" description="Your changes have been saved." />
4<AlertWarning title="Warning" description="Please review before continuing." />
5<AlertError title="Error" description="Something went wrong." />
6<AlertInfo title="Info" description="New features are available." />

  • •docs:common.accessibility.role: docs:components.alert.accessibility.role
  • •docs:common.accessibility.closeButton: docs:components.alert.accessibility.closeButton
  • •docs:common.accessibility.colorContrast: docs:components.alert.accessibility.colorContrast
  • •docs:common.accessibility.focusManagement: docs:components.alert.accessibility.focusManagement
AvatarIcon