The Alert component is used to convey important information to users, such as success messages, warnings, errors, or general information. It typically includes a status icon, a message, an optional description, and a dismiss button.

Anatomy

Usage

Basic Example

A basic alert displays a message with a default status icon.

This is an informational alert.

Show code

React

import { PlusAlert } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAlert status="info">
        <div slot="message">
          This is an informational alert.
        </div>
      </PlusAlert>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-alert status="info">
      <div slot="message">
        This is an informational alert.
      </div>
    </plus-alert>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-alert status="info">
    <div slot="message">
      This is an informational alert.
    </div>
  </plus-alert>
</template>

Svelte

<plus-alert status="info">
  <div slot="message">
    This is an informational alert.
  </div>
</plus-alert>

HTML

<plus-alert status="info">
  <div slot="message">
    This is an informational alert.
  </div>
</plus-alert>

Status

Use the status prop to indicate the type of message: info (default), success, warning, or danger. This affects the color scheme and the default icon.

Operation successful!

Operation successful!

Operation successful!

Show code

React

import { PlusAlert } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAlert status="success">
        <div slot="message">
          Operation successful!
        </div>
      </PlusAlert>
      <PlusAlert status="warning">
        <div slot="message">
          Operation successful!
        </div>
      </PlusAlert>
      <PlusAlert status="danger">
        <div slot="message">
          Operation successful!
        </div>
      </PlusAlert>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-alert status="success">
      <div slot="message">
        Operation successful!
      </div>
    </plus-alert>
    <plus-alert status="warning">
      <div slot="message">
        Operation successful!
      </div>
    </plus-alert>
    <plus-alert status="danger">
      <div slot="message">
        Operation successful!
      </div>
    </plus-alert>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-alert status="success">
    <div slot="message">
      Operation successful!
    </div>
  </plus-alert>
  <plus-alert status="warning">
    <div slot="message">
      Operation successful!
    </div>
  </plus-alert>
  <plus-alert status="danger">
    <div slot="message">
      Operation successful!
    </div>
  </plus-alert>
</template>

Svelte

<plus-alert status="success">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>
<plus-alert status="warning">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>
<plus-alert status="danger">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>

HTML

<plus-alert status="success">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>
<plus-alert status="warning">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>
<plus-alert status="danger">
  <div slot="message">
    Operation successful!
  </div>
</plus-alert>

Kind

The kind prop controls the visual appearance: filled (default), outlined, or dashed.

Filled (Default)

Filled (Default)

Filled (Default)

Show code

React

import { PlusAlert } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusAlert status="info" kind="filled">
        <div slot="message">
          Filled (Default)
        </div>
      </PlusAlert>
      <PlusAlert status="info" kind="outlined">
        <div slot="message">
          Filled (Default)
        </div>
      </PlusAlert>
      <PlusAlert status="info" kind="dashed">
        <div slot="message">
          Filled (Default)
        </div>
      </PlusAlert>
    </>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-alert status="info" kind="filled">
      <div slot="message">
        Filled (Default)
      </div>
    </plus-alert>
    <plus-alert status="info" kind="outlined">
      <div slot="message">
        Filled (Default)
      </div>
    </plus-alert>
    <plus-alert status="info" kind="dashed">
      <div slot="message">
        Filled (Default)
      </div>
    </plus-alert>
  `
})
export class ExampleComponent {}

Vue

<template>
  <plus-alert status="info" kind="filled">
    <div slot="message">
      Filled (Default)
    </div>
  </plus-alert>
  <plus-alert status="info" kind="outlined">
    <div slot="message">
      Filled (Default)
    </div>
  </plus-alert>
  <plus-alert status="info" kind="dashed">
    <div slot="message">
      Filled (Default)
    </div>
  </plus-alert>
</template>

Svelte

<plus-alert status="info" kind="filled">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>
<plus-alert status="info" kind="outlined">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>
<plus-alert status="info" kind="dashed">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>

HTML

<plus-alert status="info" kind="filled">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>
<plus-alert status="info" kind="outlined">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>
<plus-alert status="info" kind="dashed">
  <div slot="message">
    Filled (Default)
  </div>
</plus-alert>

Closable

Set the dismissible attribute (or dismissible={true}) to add a close button. The alert fires a plus-dismiss event when closed.

This alert can be closed.

Click the X button to dismiss.

Show code

React

import { PlusAlert } from '@plusui/react';

export default () => {
  const handleDismiss = () => {
    console.log('Alert dismissed!');
  };

  return (
    <PlusAlert status="warning" dismissible onPlusDismiss={handleDismiss}>
      <div slot="message">This alert can be closed.</div>
      <div slot="description">Click the X button to dismiss.</div>
    </PlusAlert>
  );
};

Angular

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-alert status="warning" dismissible (plus-dismiss)="handleDismiss()">
      <div slot="message">This alert can be closed.</div>
      <div slot="description">Click the X button to dismiss.</div>
    </plus-alert>
  `
})
export class ExampleComponent {
  handleDismiss() {
    console.log('Alert dismissed!');
  }
}

Vue

<template>
  <plus-alert status="warning" dismissible @plus-dismiss="handleDismiss">
    <div slot="message">This alert can be closed.</div>
    <div slot="description">Click the X button to dismiss.</div>
  </plus-alert>
</template>

<script>
export default {
  methods: {
    handleDismiss() {
      console.log('Alert dismissed!');
    }
  }
};
</script>

Svelte

<script>
  function handleDismiss() {
    console.log('Alert dismissed!');
  }
</script>

<plus-alert status="warning" dismissible on:plus-dismiss={handleDismiss}>
  <div slot="message">This alert can be closed.</div>
  <div slot="description">Click the X button to dismiss.</div>
</plus-alert>

HTML

<plus-alert id="alert-dismiss-example" status="warning" dismissible>
  <div slot="message">This alert can be closed.</div>
  <div slot="description">Click the X button to dismiss.</div>
</plus-alert>

<script>
  document.getElementById('alert-dismiss-example').addEventListener('plus-dismiss', () => {
    console.log('Alert dismissed!');
  });
</script>

Show console

Console Output:

No console output yet. Try interacting with the components above.

Clear Console

Visual Sections

Layout & Spacing

Light & Dark Mode

Accessibility (a11y)

• Keyboard Behavior:
  • If the alert is dismissible, the close button is focusable and can be activated using Enter or Space.
• Screen Reader:
  • The component uses role="alert" to announce its presence and content automatically to screen reader users.
  • aria-live="polite" ensures that updates are announced without interrupting the user, though critical alerts might warrant aria-live="assertive" if implemented via JavaScript.
  • The dismiss button should have an appropriate aria-label (e.g., “Close alert”).
• Required Developer Actions:
  • Ensure the content provided in the message and description slots is clear and concise.
  • If using custom icons via the prefix slot, ensure they have appropriate alternative text or are marked as decorative (aria-hidden="true") if the status prop already conveys the meaning.

API Reference

Properties

Name	Type	Default	Description	Required
kind	`‘filled'	'outlined'	'dashed’`	'filled'
size	`‘sm'	'md'	'lg’`	'md'
status	`‘default'	'success'	'warning'	'danger'
invert	boolean	false	Use inverted color scheme.	No
dismissible	boolean	true	Show dismiss button.	No
message	string	''	Main message content (can also be provided via slot).	No
description	string	''	Additional description (can also be provided via slot).	No
statusIcon	string	undefined	Name of the SVG icon to use for status (overrides default).	No
dismissIcon	string	undefined	Name of the SVG icon to use for the dismiss button (overrides default).	No
fullWidth	boolean	false	Make the alert span the full width of its container.	No

Events

Name	Payload Type	Description
plus-dismiss	CustomEvent<{ status: string }>	Fired when the alert is dismissed.

Slots

Name	Description
message	The main message content.
description	Additional descriptive content.
prefix	Custom status icon content.
dismiss	Custom dismiss button content.

CSS Shadow Parts

Part	Description
base	The main container element.
status-icon	The status icon container.
content	The content container.
message	The message container.
description	The description container.
dismiss	The dismiss button container.

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective