@sveltestrap/sveltestrap/dist/Alert/Alert.mdx

Bootstrap components for Svelte

import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as AlertStories from './Alert.stories';

<Meta title="Components/Alerts" />

# Alerts <small class="bootstrap-docs">[Bootstrap Alerts](https://getbootstrap.com/docs/5.3/components/alerts/)</small>

The `<Alert>` component provides contextual feedback messages for typical user actions with the handful of available and flexible alert messages. You can read more about

<Canvas>
  <Story of={AlertStories.Basic} />
</Canvas>

<div id="alert-controls">
  <Controls of={AlertStories.Basic} />
</div>

## Colors

<Canvas withSource="none">
  <Story of={AlertStories.Colors} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert } from '@sveltestrap/sveltestrap';
  const colors = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
  ];
</script>

{#each colors as color}
  <Alert {color}>
    <h4 class="alert-heading text-capitalize">Heading</h4>
   This is the contents of my alert message.

    <a href="#todo" class="alert-link">
      Also, alert-links are colored to match the alert color!
    </a>
  </Alert>
{/each}
`} />

## Fade

<p>
  You can disable the <code>Alert</code> fade transition by setting the <code>fade</code> prop to <code>false</code>.
</p>

<Canvas withSource="none">
  <Story of={AlertStories.Fade} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert } from '@sveltestrap/sveltestrap';
  let isOpen = true;
  const toggle = () => {
    visible = !visible;
  };
</script>

<Alert
  color="primary"
  {isOpen}
  {toggle}
  fade={false}
>
  I am a primary alert and I can be dismissed without animating!
</Alert>
`} />

## Header

<Canvas withSource="none">
  <Story of={AlertStories.Header} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert } from '@sveltestrap/sveltestrap';
</script>

<Alert color="primary" heading="Hey here's header text">
  Lorem ipsum lorem dolor sit amet.
</Alert>
`} />

## Controlled

<Canvas withSource="none">
  <Story of={AlertStories.Controlled} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert, Button } from '@sveltestrap/sveltestrap';
  let isOpen = true;
  const toggle = () => {
    visible = !visible;
  };
</script>

<Alert color="primary" isOpen={isOpen} toggle={() => (isOpen = false)}>
  I can be controlled via <code>isOpen</code> and <code>toggle</code>.
</Alert>

<Button color="danger" on:click={toggle}>
  You can toggle me here.
</Button>
`} />

## Dismissible

<Canvas withSource="none">
  <Story of={AlertStories.Dismissible} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert } from '@sveltestrap/sveltestrap';
</script>

<Alert color="info" dismissible>
  I am an alert and I can be dismissed!
</Alert>
`} />

## Theming

<Canvas withSource="none">
  <Story of={AlertStories.Theming} />
</Canvas>

<Source dark language="html" code={`
<script lang="ts">
  import { Alert } from '@sveltestrap/sveltestrap';
</script>

<Alert theme="dark" color="primary" isOpen={true}>
  <h4 class="alert-heading">Dark Theme</h4>
  I am a <code>dark</code> themed primary alert!
</Alert>

<Alert theme="light" heading="Light Theme" color="primary" isOpen={true}>
  I am a <code>light</code> themed primary alert!
</Alert>
`} />