Alerts

import { Status } from '@deepgram/styles/react';

<Status info>Processing your request...</Status>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-status info>Processing your request...</dg-status>

import { Status } from '@deepgram/styles/react';

<Status success>Operation completed successfully!</Status>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-status success>Operation completed successfully!</dg-status>

import { Status } from '@deepgram/styles/react';

<Status warning>This action cannot be undone.</Status>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-status warning>This action cannot be undone.</dg-status>

import { Status } from '@deepgram/styles/react';

<Status error>An error occurred. Please try again.</Status>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-status error>An error occurred. Please try again.</dg-status>

import { Alert, AlertBody, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@deepgram/styles/react';

<Alert warning>
  <AlertContent>
    <AlertIcon name="triangle-exclamation" />
    <AlertBody>
      <AlertTitle>Attention needed</AlertTitle>
      <AlertDescription>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.</p>
      </AlertDescription>
    </AlertBody>
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert warning>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-triangle-exclamation"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">Attention needed</h3>
      <div class="dg-alert__description">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum similique veniam quo totam eius aperiam dolorum.</p>
      </div>
    </div>
  </div>
</dg-alert>

import { Alert, AlertBody, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@deepgram/styles/react';

<Alert success>
  <AlertContent>
    <AlertIcon name="circle-check" />
    <AlertBody>
      <AlertTitle>Successfully uploaded</AlertTitle>
      <AlertDescription>
        <p>Your file has been uploaded and is now being processed.</p>
      </AlertDescription>
    </AlertBody>
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert success>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-circle-check"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">Successfully uploaded</h3>
      <div class="dg-alert__description">
        <p>Your file has been uploaded and is now being processed.</p>
      </div>
    </div>
  </div>
</dg-alert>

import { Alert, AlertBody, AlertContent, AlertIcon, AlertList, AlertTitle } from '@deepgram/styles/react';

<Alert danger>
  <AlertContent>
    <AlertIcon name="circle-xmark" />
    <AlertBody>
      <AlertTitle>There were errors with your submission</AlertTitle>
      <AlertList>
        <li>Your API key is invalid</li>
        <li>The project name is already taken</li>
      </AlertList>
    </AlertBody>
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert danger>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-circle-xmark"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">There were errors with your submission</h3>
      <ul class="dg-alert__list">
        <li>Your API key is invalid</li>
        <li>The project name is already taken</li>
      </ul>
    </div>
  </div>
</dg-alert>

import { Alert, AlertBody, AlertContent, AlertDescription, AlertIcon, AlertTitle } from '@deepgram/styles/react';

<Alert info>
  <AlertContent>
    <AlertIcon name="circle-info" />
    <AlertBody>
      <AlertTitle>New API version available</AlertTitle>
      <AlertDescription>
        <p>A new version of the API is available. Please update your integration to take advantage of new features.</p>
      </AlertDescription>
    </AlertBody>
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert info>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-circle-info"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">New API version available</h3>
      <div class="dg-alert__description">
        <p>A new version of the API is available. Please update your integration to take advantage of new features.</p>
      </div>
    </div>
  </div>
</dg-alert>

import { Alert, AlertActions, AlertBody, AlertContent, AlertDescription, AlertIcon, AlertTitle, Btn } from '@deepgram/styles/react';

<Alert warning>
  <AlertContent>
    <AlertIcon name="triangle-exclamation" />
    <AlertBody>
      <AlertTitle>Attention needed</AlertTitle>
      <AlertDescription>
        <p>Your account is approaching its usage limit. Upgrade your plan to avoid service interruptions.</p>
      </AlertDescription>
      <AlertActions>
        <Btn ghost sm type="button">View usage</Btn>
        <Btn primary sm type="button">Upgrade plan</Btn>
      </AlertActions>
    </AlertBody>
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert warning>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-triangle-exclamation"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">Attention needed</h3>
      <div class="dg-alert__description">
        <p>Your account is approaching its usage limit. Upgrade your plan to avoid service interruptions.</p>
      </div>
      <div class="dg-alert__actions">
        <dg-btn ghost sm type="button">View usage</dg-btn>
        <dg-btn primary sm type="button">Upgrade plan</dg-btn>
      </div>
    </div>
  </div>
</dg-alert>

import { Alert, AlertBody, AlertContent, AlertDismiss, AlertIcon, AlertTitle } from '@deepgram/styles/react';

<Alert success>
  <AlertContent>
    <AlertIcon name="circle-check" />
    <AlertBody>
      <AlertTitle>Operation completed</AlertTitle>
    </AlertBody>
    <AlertDismiss name="xmark" type="button" aria-label="Dismiss" />
  </AlertContent>
</Alert>

<script type="module">
  import '@deepgram/styles/wc';
</script>

<dg-alert success>
  <div class="dg-alert__content">
    <i class="dg-alert__icon fas fa-circle-check"></i>
    <div class="dg-alert__body">
      <h3 class="dg-alert__title">Operation completed</h3>
    </div>
    <button class="dg-alert__dismiss fas fa-xmark" type="button" aria-label="Dismiss"></button>
  </div>
</dg-alert>