---
title: Alert | UI
description: Alert component is used to create clickable elements that perform an action when pressed.
pageTitle: Alert
pageDescription: Alert component is used to create clickable elements that perform an action when pressed.
showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="components/Feedback/Alert" />

import { Alert, CheckCircleIcon, CloseIconFilled } from './Alert';
import { NotificationIcon, WarningIcon, Center, VStack } from './Alert';
import { transformedCode } from '../../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  InlineCode,
  AddIcon,
  InfoIcon,
} from '@gluestack/design-system';

import Wrapper from '../../Wrapper';

# Installation

This command copies the `Alert` component to your project.

```jsx
npx install @gluestack-ui add alert
```

## Import

```jsx
// import the component from your component folder
import { Alert } from 'components';
```

<br />

# Basic

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
 <Alert>
  <Alert.Icon>
    <InfoIcon />
  </Alert.Icon>
  <Alert.Text>Selection successfully moved!</Alert.Text>
</Alert>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Alert,
        InfoIcon,
      },
      argsType: {},
    }}
  />
</AppProvider>
<br />

## Anatomy

The alert component consists of the following parts:

```jsx
export default () => (
  <Alert>
    <Alert.Text>Alert</Alert.Text>
    <Alert.Icon />
  </Alert>
);
```

## API Reference

### Alert

Contains all alert related layout style props and actions.
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/pressable#props) component.

### Alert.Icon

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view#props) component.

### Alert.Text

Contains all spinner related layout style props and actions.
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text#props) component.

<br />
<br />

## Examples

### Alert Variants

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      <VStack space="md" w="100%" justifyContent="center" alignItems="center">
        <Alert action="info">
          <Alert.Icon>
            <InfoIcon />
          </Alert.Icon>
          <Alert.Text>
            Unlock the power of knowledge with the following information. Get
            ready to unleash your inner superhero and change the world!
          </Alert.Text>
        </Alert>
        <Alert action="success">
          <Alert.Icon>
            <CheckCircleIcon />
          </Alert.Icon>
          <Alert.Text>
            Boom! You did it! Please take a moment to pat yourself on the back.
            You've earned it!
          </Alert.Text>
        </Alert>
        <Alert action="error">
          <Alert.Icon>
            <CloseIconFilled />
          </Alert.Icon>
          <Alert.Text>
            Uh-oh! It looks like the matrix has glitched. Our team of tech
            ninjas are already on the case. Please hold tight while we fix the
            issue
          </Alert.Text>
        </Alert>
        <Alert action="warning">
          <Alert.Icon>
            <WarningIcon />
          </Alert.Icon>
          <Alert.Text>
            Warning: Reading the following content may cause spontaneous
            outbursts of 'aha!' moments
          </Alert.Text>
        </Alert>
        <Alert action="muted">
          <Alert.Icon>
            <NotificationIcon />
          </Alert.Icon>
          <Alert.Text>
            Need a helping hand? Your help alert has just been activated, and
            we're here to lend you our expertise, our experience, and our
            enthusiasm. Let's do this!
          </Alert.Text>
        </Alert>
      </VStack>
`,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Alert,
        Wrapper,
        InfoIcon,
        CheckCircleIcon,
        CloseIconFilled,
        WarningIcon,
        NotificationIcon,
        VStack,
      },
      argsType: {},
    }}
  />
</AppProvider>

<br />

# Advanced

## Customizing the Alert

We have a function called `createAlert` which can be used to create a custom alert component. This function takes in a configuration object which contains the styled components that you want to use for the alert. You can refer [dank.style](https://dank.style/) for more information on how to use styled components.

### Usage

```jsx
// import the styles
import { Root, Text, Icon } from '../components/core/alert/styled-components';

// Understanding the API
const Alert: any = Root;
Alert.Icon = Icon;
Alert.Text = Text;

// Using the alert component
export default () => (
    <Alert>
      <Alert.Icon>
      <Alert.Text />
    </Alert>
);
```

Default styling of all these components can be found in the `components/core/alert` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/development/example/storybook/src/components/Alert/index.tsx) of the styled `Alert` components.