> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 5f7a5c20-6c0f-4d64-adf1-8d9cab5fdefd
---

# Alert

> Learn about the Alert component for use in UI extensions.

export const ComponentProp = ({name, required, type, description, defaultValue, seeItems}) => {
  const renderSeeItems = () => {
    if (!seeItems || seeItems.length === 0) {
      return null;
    }
    if (seeItems.length === 1) {
      return <div className="component-prop-see-wrapper">
          <strong>See:</strong> {seeItems[0]}
        </div>;
    }
    return <div className="component-prop-see-wrapper">
        See:
        <ul>
          {seeItems.map((item, index) => <li key={index}>{item}</li>)}
        </ul>
      </div>;
  };
  return <tr>
      <td>
        <code>{name}</code>
        {required && <> <Tag type="error">Required</Tag></>}
      </td>
      <td>
        {type}
        {defaultValue && <div className="component-prop-default-value-wrapper">
            <strong>Default:</strong> {defaultValue}
          </div>}
      </td>
      <td>
        {description}
        {renderSeeItems()}
      </td>
    </tr>;
};

export const ComponentProps = ({children}) => {
  return <div className="component-props">
      <table>
        <thead>
          <tr>
            <th>Prop</th>
            <th>Type</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>{children}</tbody>
      </table>
    </div>;
};

export const Tag = ({children, type = 'default', className = ''}) => {
  return <span className={`tag tag-${type} ${className}`.trim()}>
      {children}
    </span>;
};

Use the `Alert` component to render an alert within a card. Use this component to give usage guidance, notify users of action results, or warn them about potential issues or failures. Alerts can be placed in components statically or triggered dynamically as the result of an action.

If you want to render an alert banner at the top of the page, Learn more about the [AddAlert method](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners).

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie%20alerts%20diagram.png" alt="uie alerts diagram" />
</Frame>

1. **Title:** the alert's bolded title text which should summarize its intent or an action outcome.
2. **Body:** the descriptive text that follows the title, which should provide the user with the necessary information to proceed.
3. **Variant:** the color of the alert. Learn more about when to use each variant below.

```jsx theme={null}
import { Alert } from "@hubspot/ui-extensions";

const Extension = () => {
  return (
    <>
      <Alert title="Important Info">This is an informative message.</Alert>
      <Alert title="Tip" variant="tip">
        Double check fields before submitting.
      </Alert>
      <Alert title="Success" variant="success">
        Operation completed successfully.
      </Alert>
      <Alert title="Warning" variant="warning">
        Proceed with caution.
      </Alert>
      <Alert title="Danger" variant="danger">
        This action cannot be undone. Be careful.
      </Alert>
    </>
  );
};
```

## Props

<ComponentProps autoGenerated componentName="Alert">
  <ComponentProp name="title" required={true} type={<><code>string</code></>} description={<>The bolded text of the alert.</>} />

  <ComponentProp name="children" required={false} type={<><code>ReactNode</code></>} description={<>The main content of the alert message.</>} />

  <ComponentProp name="testId" required={false} type={<><code>string</code></>} description={<>Used by <code>findByTestId()</code> to locate this component in tests.</>} seeItems={[<><a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/tools/testing/reference#findbytestid">Testing utilities reference</a></>]} />

  <ComponentProp name="variant" required={false} type={<><code>"danger"</code> | <code>"error"</code> | <code>"info"</code> | <code>"success"</code> | <code>"tip"</code> | <code>"warning"</code></>} description={<>The color of the alert. See <a href="https://developers.hubspot.com/docs/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert#variants">variants</a> for more information.</>} defaultValue={<><code>"info"</code></>} />
</ComponentProps>

## Variants

There are five alert types, which can be set using the `variant` prop.

* `'info'`: a blue alert for general messages to inform the user.

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie-components-alerts-variants_2.png" alt="uie-components-alerts-variants_2" />
</Frame>

* `'tip'`: a white alert to provide guidance and tips.

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie-components-alerts-tip.png" alt="uie-components-alerts-tip" />
</Frame>

* `'success'`: a green alert to indicate the successful completion of a task or to convey a positive CRM record status.

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie-components-alerts-variants_1.png" alt="uie-components-alerts-variants_1" />
</Frame>

* `'warning'`: a yellow alert for general warnings related to the performance of the system or the status of the CRM record.

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie-components-alerts-variants_4.png" alt="uie-components-alerts-variants_4" />
</Frame>

* `'danger'`: a red alert indicating an error, the degradation of a system, or a negative CRM record status. You should not use this alert type for anything other than errors and negative statuses.

<Frame>
  <img width="460" src="https://knowledge.hubspot.com/hubfs/Knowledge_Base_2023_2024/uie-components-alerts-variants_3.png" alt="uie-components-alerts-variants_3" />
</Frame>

## Usage examples

* Use an `'info'` alert to add instructions to a custom card, such as "Fill out this form using the contact's company information."
* Use a `'success'` alert when a user successfully submits a form in the UI extension, or to convey that a contact qualifies for enrollment in a promotional offering.
* Use a `'warning'` alert to call attention to a contact's upcoming renewal date.
* Use a `'danger'` alert to notify the user of a form submission error or to signify that a high-urgency ticket has lapsed.

## Guidelines

* **DO:** use alert text that clearly communicates to the user what they need to know.
* **DO:** make alert text actionable, especially for error alerts which should provide a clear path to resolution.
* **DO:** use proper punctuation, such as periods and question marks at the end of the descriptive text.
* **DO:** set the alert as the first component in the extension when possible for visibility. Extensions with alerts should also be placed at the top of the CRM record by a HubSpot admin. Learn more about [customizing CRM record tabs](https://knowledge.hubspot.com/object-settings/customize-records).
* **DON'T:** use exclamation points in warning or error alerts. Exclamation points should only be used for short, positive messages (e.g. "Great!" or "Well done!").

## Related components

* [Display alert banners outside of a card](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners)
* [EmptyState](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/empty-state)
* [ErrorState](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/error-state)
* [LoadingSpinner](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/loading-spinner)