tabler/preview/pages/alerts.astro

---
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Alert from '@ui/Alert.astro'
import Card from '@ui/Card.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import DocsLink from '@ui/DocsLink.astro'
---

<DefaultLayout title="Alerts" pageMenu="base.alerts" description="Alert messages inform users about the status of an action, in success, info, warning, or danger states.">
  <DocsLink slot="page-header-actions" path="/ui/components/alert" />

  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Basic</CardTitle>
          <CardSubtitle>A title and a color are enough to show the status of an action.</CardSubtitle>
          <Alert color="danger" title="An error occurred!" />
          <Alert color="warning" title="Some information is missing!" />
          <Alert color="success" title="Completed successfully!" />
          <Alert color="info" title="Just a quick note!" />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>With action</CardTitle>
          <CardSubtitle>Add an <code>alert-action</code> link to give users something to do next.</CardSubtitle>
          <Alert showClose action="Link" color="danger" title="An error occurred!" />
          <Alert showClose action="Link" color="warning" title="Some information is missing!" />
          <Alert showClose action="Link" color="success" title="Completed successfully!" />
          <Alert showClose action="Link" color="info" title="Just a quick note!" />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Dismissible</CardTitle>
          <CardSubtitle>Add <code>alert-dismissible</code> and a <code>btn-close</code> button to let users close the alert.</CardSubtitle>
          <Alert showClose color="danger" title="An error occurred!" />
          <Alert showClose color="warning" title="Some information is missing!" />
          <Alert showClose color="success" title="Completed successfully!" />
          <Alert showClose color="info" title="Just a quick note!" />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>With a description</CardTitle>
          <CardSubtitle>Add an <code>alert-description</code> or an <code>alert-list</code> when the title alone isn't enough context.</CardSubtitle>
          <Alert showClose color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose color="warning" title="Some information is missing!" description="This is a custom alert box with a description." />
          <Alert showClose color="success" title="Completed successfully!" description="This is a custom alert box with a description." />
          <Alert showClose color="info" title="Just a quick note!" description="This is a custom alert box with a description." />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Important</CardTitle>
          <CardSubtitle>Add <code>alert-important</code> for a bolder style that stands out from the rest of the page.</CardSubtitle>
          <Alert showClose variant="important" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose variant="important" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
          <Alert showClose variant="important" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
          <Alert showClose variant="important" color="info" title="This is a custom alert box!" description="This is a custom alert box with a description." />
          <Alert showClose variant="important" action="Link" color="danger" title="An error occurred!" />
          <Alert showClose variant="important" link="Link" color="info" title="Just a quick note!" />
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card>
        <CardBody>
          <CardTitle>Minor</CardTitle>
          <CardSubtitle>Add <code>alert-minor</code> for a quieter style that fits inline with other content.</CardSubtitle>
          <Alert showClose variant="minor" color="danger" title="Password does not meet requirements:" list={['Minimum 8 characters', 'Include a special character']} />
          <Alert showClose variant="minor" color="success" title="This is a custom alert box!" description="This is a custom alert box with a description." />
          <Alert showClose variant="minor" color="warning" title="This is a custom alert box!" description="This is a custom alert box with a description." />
          <Alert showClose variant="minor" color="info" title="This is a custom alert box!" description="This is a custom alert box with a description." />
        </CardBody>
      </Card>
    </div>
  </div>
</DefaultLayout>