---
schema_version: "1"
id: 2339aab9ac9bb8b91d25cbb8d788dde1ee93a603082276b04688d1714b05773d
title: Alert Lightning Web Component ReadMe (Managed Package)
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/xcloud/264-0-0/os_alert_lightning_web_component_readme.md
canonical_url: https://help.salesforce.com/s/articleView?id=xcloud.os_alert_lightning_web_component_readme.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 198f8b6a79ce7d3d5a70bd78bf9153e815236bd48903ef4ed0242e192418fe65
description: For the managed package runtime, this page contains the Alert LWC ReadMe for each Vlocity release.
products:
  - Omnistudio
release: "264"
---
# Alert Lightning Web Component ReadMe (Managed Package)

For the managed package runtime, this page contains the Alert LWC ReadMe for each Vlocity release.

![Managed Package app icon](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-xcloud-omnistudio_for_managed_packages-264-0-0-production-enus/aa2554ec-624a-4ee6-8da4-6435670e6e62/resources-global/_corporate/images/managedpackageicon.png) This information is for Omnistudio for Managed Packages. For Omnistudio on standard runtime, see [Omnistudio Help](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_standard.htm&language=en_US).

## Vlocity Insurance and Health Spring '20

The _Alert Lightning Web Component_ displays an SLDS or Newport alert.

## Available c-alert Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e65">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e71">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e77">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e83">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e89">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e65 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e71 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e89 ">
              <p style="margin-bottom:0;">Specifies the theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e65 ">
              <p style="margin-bottom:0;">message</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e89 ">
              <p style="margin-bottom:0;">Pass simple message into the component. For messages containing markup, use the default slot. If slotted content is passed, <code>Alert#message</code> is ignored.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e65 ">
              <p style="margin-bottom:0;">variation</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e71 ">
              <p style="margin-bottom:0;">info, warning, error, offline (Default: info)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e89 ">
              <p style="margin-bottom:0;">An enum value representing the components style variation.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e65 ">
              <p style="margin-bottom:0;">dismissible</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e71 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e77 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e89 ">
              <p style="margin-bottom:0;">If true, the alert can be dismissed by user.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e65 ">
              <p style="margin-bottom:0;">icon</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e71 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e77 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e83 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e89 ">
              <p style="margin-bottom:0;">The icon name in <code>spriteName:iconName</code>format. For example <code>utility:info</code>. Pass an empty string to hide. See <a href="https://www.lightningdesignsystem.com/icons/" target="_blank">SLDS icons</a>.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-alert\* Component

```
<c-alert theme="slds"
         variation="info|warning|error|offline"
         icon="utility:trail"
         message="This is a simple message.">
           <span>For more <em>complex</em> messaging, use the default slot.
             <a href="https://lwc.dev/guide/composition#pass-markup-into-slots" target="_blank">Using slots.</a>
           </span>
</c-alert>
```

## Available Custom Labels

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e278">
              <p style="margin-bottom:0;">Label</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e284">
              <p style="margin-bottom:0;">ApiName</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e290">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Label" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e278 ">
              <p style="margin-bottom:0;">Close</p>
            </td>

            <td data-label="ApiName" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e284 ">
              <p style="margin-bottom:0;">cmpClose</p>
            </td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e290 ">
              <p style="margin-bottom:0;">Assistive text for the icon to close or dismiss the alert.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Available Methods

dismiss()

Dismisses the alert.

## Available Classes

Alert

Static class of `c-alert` component.

## Available Events

dismissed

Fires when the alert is dismissed.

## Available Variations

enum

Enum for style variations. Is read-only.

## Vlocity Insurance and Health Winter '20 and Vlocity CME Spring '20

The _Alert Lightning Web Component_ displays an SLDS or Newport alert.

## Available c-alert Attributes

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col>
          <col>
          <col>
          <col>
          <col>
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e407">
              <p style="margin-bottom:0;">Attribute</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e413">
              <p style="margin-bottom:0;">Value</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e419">
              <p style="margin-bottom:0;">Type</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e425">
              <p style="margin-bottom:0;">Required</p>
            </th>
            <th scope="col" class="slds-cell-wrap" style="vertical-align:top;" id="d287639e431">
              <p style="margin-bottom:0;">Description</p>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e407 ">
              <p style="margin-bottom:0;">theme</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e413 ">
              <p style="margin-bottom:0;">slds, nds (Default: slds)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e419 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e425 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e431 ">
              <p style="margin-bottom:0;">Specifies the theme to use.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e407 ">
              <p style="margin-bottom:0;">message</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e413 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e419 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e425 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e431 ">
              <p style="margin-bottom:0;">Pass simple message into the component. For messages containing markup, use the default slot. If slotted content is passed, <code>Alert#message</code> is ignored.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e407 ">
              <p style="margin-bottom:0;">variation</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e413 ">
              <p style="margin-bottom:0;">info, warning, error, offline (Default: info)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e419 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e425 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e431 ">
              <p style="margin-bottom:0;">An enum value representing the components style variation.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e407 ">
              <p style="margin-bottom:0;">dismissible</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e413 ">
              <p style="margin-bottom:0;">true, false (Default: false)</p>
            </td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e419 ">
              <p style="margin-bottom:0;">boolean</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e425 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e431 ">
              <p style="margin-bottom:0;">If true, the alert is can be dismissed by user.</p>
            </td>

          </tr>
          <tr class="">
            <td data-label="Attribute" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e407 ">
              <p style="margin-bottom:0;">icon</p>
            </td>

            <td data-label="Value" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e413 ">&nbsp;</td>

            <td data-label="Type" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e419 ">
              <p style="margin-bottom:0;">string</p>
            </td>

            <td data-label="Required" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e425 ">&nbsp;</td>

            <td data-label="Description" class="slds-cell-wrap" style="vertical-align:top;" headers="d287639e431 ">
              <p style="margin-bottom:0;">The icon name in <code>spriteName:iconName</code>format. For example <code>utility:info</code>. Pass an empty string to hide. See <a href="https://www.lightningdesignsystem.com/icons/" target="_blank">SLDS icons</a>.</p>
            </td>

          </tr>
        </tbody>
      </table>

## Example c-alert Component

```
<c-alert theme="slds"
         variation="info|warning|error|offline"
         icon="utility:trail"
         message="This is a simple message.">
           <span>For more <em>complex</em> messaging, use the default slot.
             <a href="https://lwc.dev/guide/composition#pass-markup-into-slots" target="_blank">Using slots.</a>
           </span>
</c-alert>
```

## Available Methods

dismiss()

Dismisses the alert.

## Available Classes

Alert

Static class of `c-alert` component.

## Available Events

dismissed

Fires when the alert is dismissed.

## Available Variations

enum

Enum for style variations. Is read-only.