sandstone/Alert

Sandstone styled modal Alert components.

import Alert from '@enact/sandstone/Alert';

Members

AlertComponent

A modal Alert component, ready to use in Sandstone applications.

Alert may be used to interrupt a workflow to receive feedback from the user. The dialog consists of a title, a message, and an area for additional buttons.

Usage:

<Alert
  open={this.state.open}
  title="An Important Alert"
>
  <image>
    <AlertImage src={this.state.src} type="thumbnail" />
  </image>

  Body text for alert. Components may also be used here for greater customizability.

  <buttons>
    <Button>Button 1</Button>
    <Button>Button 2</Button>
  </buttons>
</Alert>
import Alert from '@enact/sandstone/Alert';

AlertBaseComponent

A modal Alert component.

This component is most often not used directly but may be composed within another component as it is within Alert.

import {AlertBase} from '@enact/sandstone/Alert';
Properties
buttons
ElementArrayElement

Buttons to be included under the component.

Typically, up to 3 buttons are used.

children
Node

The contents of the body of the component.

Only shown when type="overlay". If children is text-only, it will be wrapped with BodyText.

image
Element

Image to be included in the Alert component.

It is recommended to use the AlertImage component.

onClose
Function

Called when the user requests to close the Alert.

This also includes pressing the cancel key.

onHide
Function

Called after the transition to hide the Alert has finished.

open
Boolean

Opens the Alert.

Default: false
title
String

The primary text displayed.

Only shown when type="fullscreen".

type
'fullscreen''overlay'

Type of popup.

There are two types:

  • fullscreen - Full screen popup

  • overlay - Popup in the center of the screen

Default: 'fullscreen'

AlertImageComponent

An image for use in an Alert.

import {AlertImage} from '@enact/sandstone/Alert';
Statics
src
StringObject

String value or Object of values used to determine which image will appear for a specific component size.

type
'icon''thumbnail'

Type of image to appear in the alert component. There are two types:

  • icon - A small square sized image type

  • thumbnail - A common image type

ArrayBooleanFunctionModuleNumberObjectString