#Basic

Your profile has been saved
<Alert>Your profile has been saved</Alert>,

#AlertHeader and AlertBody

Success
Your profile has been saved.
<Alert>
  <AlertHeader>Success</AlertHeader>
  <AlertBody>Your profile has been saved.</AlertBody>
</Alert>

#Variant

Set variant to "success", "info", "warning", "danger", or "neutral".
Success
Your profile has been saved.
Note
Your account has been updated.
Warning
Your plan is set to expire.
Danger
Your payment method is inactive.
Note
Your account has been updated.
<Stack class="w-full gap-5">
  <Alert variant="success">
    <AlertHeader>Success</AlertHeader>
    <AlertBody>Your profile has been saved.</AlertBody>
  </Alert>
  <Alert variant="info">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
  <Alert variant="warning">
    <AlertHeader>Warning</AlertHeader>
    <AlertBody>Your plan is set to expire.</AlertBody>
  </Alert>
  <Alert variant="danger">
    <AlertHeader>Danger</AlertHeader>
    <AlertBody>Your payment method is inactive.</AlertBody>
  </Alert>
  <Alert variant="neutral">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
</Stack>

#Not dismissable

Set isDismissable to false.
Success
Your profile has been saved.
Note
Your account has been updated.
Warning
Your plan is set to expire.
Danger
Your payment method is inactive.
Note
Your account has been updated.
<Stack class="w-full gap-5">
  <Alert isDismissable={false} variant="success">
    <AlertHeader>Success</AlertHeader>
    <AlertBody>Your profile has been saved.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="info">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="warning">
    <AlertHeader>Warning</AlertHeader>
    <AlertBody>Your plan is set to expire.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="danger">
    <AlertHeader>Danger</AlertHeader>
    <AlertBody>Your payment method is inactive.</AlertBody>
  </Alert>
  <Alert isDismissable={false} variant="neutral">
    <AlertHeader>Note</AlertHeader>
    <AlertBody>Your account has been updated.</AlertBody>
  </Alert>
</Stack>

#Props

variant
Required
false
Type
'success' | 'info' | 'warning' | 'danger' | 'neutral'
Default
"neutral"
isDismissable
Required
false
Type
boolean
Default
true
children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
Omit<ComponentProps<"div">, "size">
Default
none
Notes
See the docs for rest parameters. For Alert, you could pass anything you normally would pass to <div> because the return value looks something like this:
<div class={containerClass} {...restWithoutClass}>
  {children}
</div>

AlertHeader

children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"div">
Default
none

AlertBody

children*
Required
true
Type
ComponentChild
Default
none
...rest
Required
false
Type
ComponentProps<"div">
Default
none