Feedback

Alert

A static message with an optional icon, title, description and action.

Class name	Type	Description
`alertplf:alert`	Component	A message; neutral on its own
`alert-bodyplf:alert-body`	Part	The icon and content, beside an action
`alert-iconplf:alert-icon`	Part	Your own SVG, in place of the color's icon; an icon class there doesn't need it
`alert-contentplf:alert-content`	Part	The title and description
`alert-titleplf:alert-title`	Part	The title
`alert-descriptionplf:alert-description`	Part	The description
`alert-actionplf:alert-action`	Part	One button or link
`alert-infoplf:alert-info`	Color	Info color
`alert-successplf:alert-success`	Color	Success color
`alert-warningplf:alert-warning`	Color	Warning color
`alert-errorplf:alert-error`	Color	Error color

Default

Alert title

This is the alert description.

<div class="alert">
  <div class="alert-body">
    <span class="icon icon-circle-check"></span>
    <div class="alert-content">
      <h3 class="alert-title">Alert title</h3>
      <p class="alert-description">This is the alert description.</p>
    </div>
  </div>
</div>

<div class="plf:alert">
  <div class="plf:alert-body">
    <span class="plf:icon plf:icon-circle-check"></span>
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Alert title</h3>
      <p class="plf:alert-description">This is the alert description.</p>
    </div>
  </div>
</div>

import { Alert, AlertBody, AlertContent, AlertDescription, AlertTitle, Icon } from '@pelatform/react';

export function Example() {
  return (
    <Alert>
      <AlertBody>
        <Icon name="circle-check" />
        <AlertContent>
          <AlertTitle>Alert title</AlertTitle>
          <AlertDescription>This is the alert description.</AlertDescription>
        </AlertContent>
      </AlertBody>
    </Alert>
  );
}

import { Alert, AlertBody, AlertContent, AlertDescription, AlertTitle, Icon } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Alert>
      <AlertBody>
        <Icon name="circle-check" />
        <AlertContent>
          <AlertTitle>Alert title</AlertTitle>
          <AlertDescription>This is the alert description.</AlertDescription>
        </AlertContent>
      </AlertBody>
    </Alert>
  );
}

Alert adds no role: when you insert one after an event, add role="alert" for an urgent error or role="status" for routine feedback.

Colors

Info

This is an info alert.

Success

This is a success alert.

Warning

This is a warning alert.

Error

This is an error alert.

<div class="alert alert-info">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Info</h3>
      <p class="alert-description">This is an info alert.</p>
    </div>
  </div>
</div>
<div class="alert alert-success">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Success</h3>
      <p class="alert-description">This is a success alert.</p>
    </div>
  </div>
</div>
<div class="alert alert-warning">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Warning</h3>
      <p class="alert-description">This is a warning alert.</p>
    </div>
  </div>
</div>
<div class="alert alert-error">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Error</h3>
      <p class="alert-description">This is an error alert.</p>
    </div>
  </div>
</div>

<div class="plf:alert plf:alert-info">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Info</h3>
      <p class="plf:alert-description">This is an info alert.</p>
    </div>
  </div>
</div>
<div class="plf:alert plf:alert-success">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Success</h3>
      <p class="plf:alert-description">This is a success alert.</p>
    </div>
  </div>
</div>
<div class="plf:alert plf:alert-warning">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Warning</h3>
      <p class="plf:alert-description">This is a warning alert.</p>
    </div>
  </div>
</div>
<div class="plf:alert plf:alert-error">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Error</h3>
      <p class="plf:alert-description">This is an error alert.</p>
    </div>
  </div>
</div>

import { Alert, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Alert color="info">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Info</AlertTitle>
            <AlertDescription>This is an info alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="success">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Success</AlertTitle>
            <AlertDescription>This is a success alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="warning">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Warning</AlertTitle>
            <AlertDescription>This is a warning alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="error">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>This is an error alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
    </>
  );
}

import { Alert, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Alert color="info">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Info</AlertTitle>
            <AlertDescription>This is an info alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="success">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Success</AlertTitle>
            <AlertDescription>This is a success alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="warning">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Warning</AlertTitle>
            <AlertDescription>This is a warning alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
      <Alert color="error">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Error</AlertTitle>
            <AlertDescription>This is an error alert.</AlertDescription>
          </AlertContent>
        </AlertBody>
      </Alert>
    </>
  );
}

Color and icons only support the message, so write a title or description that states it on its own.

Actions

Preview only

Changes stay in this browser. Nothing is sent to a server.

Usage guide

Review the destination and permissions before publishing these changes

Check the destination and permissions before publishing changes.

Connection failed

The example service could not be reached. Your existing data is unchanged.

<div class="alert alert-info">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Preview only</h3>
      <p class="alert-description">Changes stay in this browser. Nothing is sent to a server.</p>
    </div>
  </div>
  <a class="alert-action" href="#">Usage guide</a>
</div>
<div class="alert alert-warning">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Review the destination and permissions before publishing these changes</h3>
      <p class="alert-description">Check the destination and permissions before publishing changes.</p>
    </div>
  </div>
  <button class="alert-action">Review preview</button>
</div>
<div class="alert alert-error">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Connection failed</h3>
      <p class="alert-description">The example service could not be reached. Your existing data is unchanged.</p>
    </div>
  </div>
  <button class="alert-action">Retry preview</button>
</div>

<div class="plf:alert plf:alert-info">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Preview only</h3>
      <p class="plf:alert-description">Changes stay in this browser. Nothing is sent to a server.</p>
    </div>
  </div>
  <a class="plf:alert-action" href="#">Usage guide</a>
</div>
<div class="plf:alert plf:alert-warning">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Review the destination and permissions before publishing these changes</h3>
      <p class="plf:alert-description">Check the destination and permissions before publishing changes.</p>
    </div>
  </div>
  <button class="plf:alert-action">Review preview</button>
</div>
<div class="plf:alert plf:alert-error">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Connection failed</h3>
      <p class="plf:alert-description">The example service could not be reached. Your existing data is unchanged.</p>
    </div>
  </div>
  <button class="plf:alert-action">Retry preview</button>
</div>

import { Alert, AlertAction, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Alert color="info">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Preview only</AlertTitle>
            <AlertDescription>Changes stay in this browser. Nothing is sent to a server.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <a className="alert-action" href="#">Usage guide</a>
      </Alert>
      <Alert color="warning">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Review the destination and permissions before publishing these changes</AlertTitle>
            <AlertDescription>Check the destination and permissions before publishing changes.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction>Review preview</AlertAction>
      </Alert>
      <Alert color="error">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Connection failed</AlertTitle>
            <AlertDescription>The example service could not be reached. Your existing data is unchanged.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction>Retry preview</AlertAction>
      </Alert>
    </>
  );
}

import { Alert, AlertAction, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Alert color="info">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Preview only</AlertTitle>
            <AlertDescription>Changes stay in this browser. Nothing is sent to a server.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <a className="plf:alert-action" href="#">Usage guide</a>
      </Alert>
      <Alert color="warning">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Review the destination and permissions before publishing these changes</AlertTitle>
            <AlertDescription>Check the destination and permissions before publishing changes.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction>Review preview</AlertAction>
      </Alert>
      <Alert color="error">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Connection failed</AlertTitle>
            <AlertDescription>The example service could not be reached. Your existing data is unchanged.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction>Retry preview</AlertAction>
      </Alert>
    </>
  );
}

Disabled actions

An action with aria-disabled="true" stays focusable, so your code must ignore its activation.

Import complete

All 24 records were imported successfully. Export is unavailable in this preview.

Awaiting approval

The request is pending.

<div class="alert alert-success">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Import complete</h3>
      <p class="alert-description">All 24 records were imported successfully. Export is unavailable in this preview.</p>
    </div>
  </div>
  <button class="alert-action" disabled>Export records</button>
</div>
<div class="alert">
  <div class="alert-body">
    <div class="alert-content">
      <h3 class="alert-title">Awaiting approval</h3>
      <p class="alert-description">The request is pending.</p>
    </div>
  </div>
  <button class="alert-action" aria-disabled="true">Approve</button>
</div>

<div class="plf:alert plf:alert-success">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Import complete</h3>
      <p class="plf:alert-description">All 24 records were imported successfully. Export is unavailable in this preview.</p>
    </div>
  </div>
  <button class="plf:alert-action" disabled>Export records</button>
</div>
<div class="plf:alert">
  <div class="plf:alert-body">
    <div class="plf:alert-content">
      <h3 class="plf:alert-title">Awaiting approval</h3>
      <p class="plf:alert-description">The request is pending.</p>
    </div>
  </div>
  <button class="plf:alert-action" aria-disabled="true">Approve</button>
</div>

import { Alert, AlertAction, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react';

export function Example() {
  return (
    <>
      <Alert color="success">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Import complete</AlertTitle>
            <AlertDescription>All 24 records were imported successfully. Export is unavailable in this preview.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction disabled>Export records</AlertAction>
      </Alert>
      <Alert>
        <AlertBody>
          <AlertContent>
            <AlertTitle>Awaiting approval</AlertTitle>
            <AlertDescription>The request is pending.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction aria-disabled="true">Approve</AlertAction>
      </Alert>
    </>
  );
}

import { Alert, AlertAction, AlertBody, AlertContent, AlertDescription, AlertTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <>
      <Alert color="success">
        <AlertBody>
          <AlertContent>
            <AlertTitle>Import complete</AlertTitle>
            <AlertDescription>All 24 records were imported successfully. Export is unavailable in this preview.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction disabled>Export records</AlertAction>
      </Alert>
      <Alert>
        <AlertBody>
          <AlertContent>
            <AlertTitle>Awaiting approval</AlertTitle>
            <AlertDescription>The request is pending.</AlertDescription>
          </AlertContent>
        </AlertBody>
        <AlertAction aria-disabled="true">Approve</AlertAction>
      </Alert>
    </>
  );
}

Title and description only

Alert title

This is the alert description.

<div class="alert">
  <h3 class="alert-title">Alert title</h3>
  <p class="alert-description">This is the alert description.</p>
</div>

<div class="plf:alert">
  <h3 class="plf:alert-title">Alert title</h3>
  <p class="plf:alert-description">This is the alert description.</p>
</div>

import { Alert, AlertDescription, AlertTitle } from '@pelatform/react';

export function Example() {
  return (
    <Alert>
      <AlertTitle>Alert title</AlertTitle>
      <AlertDescription>This is the alert description.</AlertDescription>
    </Alert>
  );
}

import { Alert, AlertDescription, AlertTitle } from '@pelatform/react/prefixed';

export function Example() {
  return (
    <Alert>
      <AlertTitle>Alert title</AlertTitle>
      <AlertDescription>This is the alert description.</AlertDescription>
    </Alert>
  );
}

React

Alert from @pelatform/react renders this markup from its props, and each part is a component of its own.

Prop	Values	Default
`color`	`info`, `success`, `warning`, `error`	Neutral

The parts:

Part	Element
`AlertBody`	A `div` with `alert-body`
`AlertContent`	A `div` with `alert-content`
`AlertTitle`	An `h3` with `alert-title`, or `h2` to `h6` with `level`
`AlertDescription`	A `p` with `alert-description`
`AlertAction`	A `button` with `alert-action`; a link takes `className="alert-action"`

Other props are the element’s own, className and ref included.

Override on a root or on a single alert. On a root, --plf-alert-color and --plf-alert-border reach every variant: scope them to one, such as .alert-info (.plf\:alert-info with Prefixed CSS), or set the semantic colors, such as --plf-color-info-text, which the variant’s text follows, and --plf-color-info, which its border follows.

Variable	Default
`--plf-alert-bg`	Transparent; the elevated surface in a Toast
`--plf-alert-color`	Text, or the variant’s text color such as `--plf-color-info-text`
`--plf-alert-border`	`--plf-color-border-subtle`, or the variant’s border such as `--plf-color-info-border`
`--plf-alert-radius`	Large radius (8px)
`--plf-alert-padding`	Space 3 block, space 4 inline
`--plf-alert-icon-size`	`1.25em`
`--plf-alert-action-bg`, `--plf-alert-action-color`	Transparent; the alert’s text color
`--plf-alert-action-border`	`--plf-color-input`, or the variant’s border
`--plf-alert-action-hover-bg`	Muted surface; a custom `--plf-alert-action-bg` stays on hover

#Default

Alert title

#Colors

Info

Success

Warning

Error

#Actions

Preview only

Review the destination and permissions before publishing these changes

Connection failed

#Disabled actions

Import complete

Awaiting approval

#Title and description only

Alert title

#React

#CSS variables

Default

Colors

Actions

Disabled actions

Title and description only

React

CSS variables