# FullscreenAlert

**📖 Live documentation:** https://cds.coinbase.com/components/overlay/FullscreenAlert/

A fullscreen alert component for displaying important messages that require user attention.

## Import

```tsx
import { FullscreenAlert } from '@coinbase/cds-web/overlays/alert/FullscreenAlert'
```

## Examples

`FullscreenAlert` is built on top of `FullscreenModal` with an API that is similar to `Alert`.

:::tip Accessibility tip (Web only)

Alerts require an accessibility label, which we set to `title` by default. However, if there's other text that gives the user better context to the alert, then you can pass an element id to `accessibilityLabelledBy`. Alternatively, you may directly provide a contextual label to `accessibilityLabel`.

:::

### Basic example

```jsx live
function DefaultAlert() {
  const [visible, setVisible] = useState(false);

  const handleOpen = () => setVisible(true);
  const handleClose = () => setVisible(false);

  return (
    <PortalProvider>
      <Button onClick={handleOpen}>Open Alert</Button>
      <FullscreenAlert
        visible={visible}
        onRequestClose={handleClose}
        title="Connection trouble"
        body="We're unable to connect to our card partner. Apologies for the inconvenience. Please try again later today or tomorrow."
        heroSquare="errorApp500"
        preferredActionLabel="Try again"
        onPreferredActionPress={handleClose}
        dismissActionLabel="Cancel"
        onDismissActionPress={handleClose}
        closeAccessibilityLabel="Close"
      />
    </PortalProvider>
  );
}
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `body` | `string` | Yes | `-` | Alert body/description |
| `onRequestClose` | `() => void` | Yes | `-` | Callback function fired when modal is closed. |
| `preferredActionLabel` | `string` | Yes | `-` | Label of the main call to action button |
| `title` | `string` | Yes | `-` | Alert title |
| `visible` | `boolean` | Yes | `false false` | Controls visibility of the Modal |
| `accessibilityLabelledBy` | `string` | No | `-` | On web, maps to aria-labelledby and lists the id(s) of the element(s) that label the element on which the attribute is set. On mobile (Android only), a reference to another element nativeID used to build complex forms. |
| `closeAccessibilityLabel` | `string` | No | `-` | Sets an accessible label for the close button. On web, maps to aria-label and defines a string value that labels an interactive element. On mobile, VoiceOver will read this string when a user selects the associated element. |
| `disablePortal` | `boolean` | No | `-` | Disable React portal integration |
| `dismissActionLabel` | `string` | No | `-` | Label of the dismiss button |
| `heroSquare` | `HeroSquareName` | No | `-` | Name of the illustration that is rendered in the alert |
| `onDismissActionPress` | `(() => void)` | No | `-` | Callback function fired when the dismiss button is pressed |
| `onPreferredActionPress` | `(() => void)` | No | `-` | Callback function fired when the main call to action button is pressed |
| `preferredActionVariant` | `primary \| negative` | No | `primary` | Variant of the main call to action button |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |