Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Alert

Displays a callout for user attention.

code

Expend code


    <Alert icon={<CircleCheckBig size={35} />} >
      <AlertHeader>
        <AlertTitle>Title</AlertTitle>
        <AlertDescription>Description</AlertDescription>
      </AlertHeader>
      <AlertButton onClick={() => alert('Btn')}>Btn</AlertButton>
    </Alert>


    <Alert icon={<CircleCheckBig size={35} />} >
      <AlertHeader>
        <AlertTitle>Title</AlertTitle>
        <AlertDescription>Description</AlertDescription>
      </AlertHeader>
      <AlertButton onClick={() => alert('Btn')}>Btn</AlertButton>
    </Alert>

#Variant

code

Expend code


    <div className="flex flex-col gap-2">
      <Alert icon={<CircleCheckBig size={35} className="text-white" />} className="bg-blue-500 border-none">
        <AlertHeader>
          <AlertTitle className="text-white">Success</AlertTitle>
          <AlertDescription className="text-white">The work was completed successfully.</AlertDescription>
        </AlertHeader>
      </Alert>
      <Alert icon={<Info size={35} className="text-black"/>} className="bg-yellow-300 border-none">
        <AlertHeader>
          <AlertTitle className="text-black">Information</AlertTitle>
          <AlertDescription className="text-black">Please note that the system will undergo maintenance at midnight.</AlertDescription>
        </AlertHeader>
      </Alert>
    </div>


    <div className="flex flex-col gap-2">
      <Alert icon={<CircleCheckBig size={35} className="text-white" />} className="bg-blue-500 border-none">
        <AlertHeader>
          <AlertTitle className="text-white">Success</AlertTitle>
          <AlertDescription className="text-white">The work was completed successfully.</AlertDescription>
        </AlertHeader>
      </Alert>
      <Alert icon={<Info size={35} className="text-black"/>} className="bg-yellow-300 border-none">
        <AlertHeader>
          <AlertTitle className="text-black">Information</AlertTitle>
          <AlertDescription className="text-black">Please note that the system will undergo maintenance at midnight.</AlertDescription>
        </AlertHeader>
      </Alert>
    </div>

#Error with button

code

Expend code


    <Alert icon={<Ban size={35} className="text-red-500" />} className="bg-red-100 border-red-500">
      <AlertHeader>
        <AlertTitle className="text-red-500">It's an error</AlertTitle>
        <AlertDescription className="text-red-500">An error has occurred. Please try again later.</AlertDescription>
      </AlertHeader>
      <AlertButton onClick={() => confirm("Do you want retry?")} className="text-red-500">Retry</AlertButton>
    </Alert>


    <Alert icon={<Ban size={35} className="text-red-500" />} className="bg-red-100 border-red-500">
      <AlertHeader>
        <AlertTitle className="text-red-500">It's an error</AlertTitle>
        <AlertDescription className="text-red-500">An error has occurred. Please try again later.</AlertDescription>
      </AlertHeader>
      <AlertButton onClick={() => confirm("Do you want retry?")} className="text-red-500">Retry</AlertButton>
    </Alert>

Alert

The properties of the Alert component used to display warning or informational messages. The Alert component can contain children such as AlertHeader, AlertTitle, AlertDescription, and AlertButton.

Prop	Type	Default	Description
className	string	-	Specifies additional CSS classes for the Alert component.
icon	React.ReactNode	-	Specifies the icon to be displayed on the left side of the Alert.
children	React.ReactNode	-	The content inside the Alert, which can include components like AlertHeader, AlertTitle, AlertDescription, and AlertButton.

AlertHeader

The properties of the AlertHeader component which wraps the title and description.

Prop	Type	Default	Description
className	string	-	Specifies additional CSS classes for the AlertHeader component.
children	React.ReactNode	-	The content inside the AlertHeader, typically includes AlertTitle and AlertDescription.

AlertTitle

The properties of the AlertTitle component which represents the title of the Alert.

Prop	Type	Default	Description
className	string	-	Specifies additional CSS classes for the AlertTitle component.
children	React.ReactNode	-	The content of the title.

AlertDescription

The properties of the AlertDescription component which provides additional details about the Alert.

Prop	Type	Default	Description
className	string	-	Specifies additional CSS classes for the AlertDescription component.
children	React.ReactNode	-	The content of the description.

AlertButton

The properties of the AlertButton component, which represents the button inside the Alert.

Prop	Type	Default	Description
className	string	-	Specifies additional CSS classes for the AlertButton component.
onClick	() => void	-	The function that is called when the button is clicked.
children	React.ReactNode	-	The content of the button, typically a text label.