Components

Alert

Design
Code

Interrupt with a mandatory acknowledgement or decision.

Like its friend the modal, an alert disables the rest of the interface, but actions are not optional. Reserve this component for choices that should be carefully considered.

Web
React Native
Android
Apple
Other
class AlertExample extends React.Component {
  constructor() {
    super()
    this.state = { isAlertOpen: false }
  }

  toggleAlertVisibility() {
    this.setState({ isAlertOpen: !this.state.isAlertOpen });
  }

  render() {
    return (
      <div>
        <Button
          onClick={this.toggleAlertVisibility.bind(this)}>
          Show Alert
        </Button>
        <Alert
          isOpen={this.state.isAlertOpen}
          text="If you delete this athlete, they won't get access to their highlights. Are you sure?"
          qaId="uniform-alert"
          actions={[
            {
              type: 'subtle',
              label: "No, don't",
              onClick: this.toggleAlertVisibility.bind(this),
            },
            {
              type: 'destroy',
              label: 'Yes, Delete',
              onClick: this.toggleAlertVisibility.bind(this),
            },
          ]}
        />
      </div>
    )
  }
}

Props

isOpen

bool

Determines whether or not the alert is displayed.

text

string

The main content text displayed in the alert.

actions

arrayOf
action

One or more buttons to be displayed. Each action has the following shape:

  • type (string) - the type of button
  • label (string) - the text describing the action
  • status (string) - the status of the button
  • qaId (string) - a unique string to control this action in automated tests
  • actionRef (func) - a func to assign a ref to the button
  • onClick (func) - responds to the action being clicked. You should set isOpen value to false here.

qaId

string

A unique string to control this spinner in automated tests.

onAfterOpen

func

Called when the alert is opened.