Alert

Alert is a small confirmation modal composed of a Heading, optional description, and a ButtonGroup of actions. The last action in the array is rendered as the primary (solid) button; preceding actions are rendered as ghost buttons.

Import

import { Alert } from '@mindees/ui';

Usage

Default — a single OK action that just closes the alert:

const [visible, setVisible] = useState(false);

<Alert
  visible={visible}
  onClose={() => setVisible(false)}
  title="Saved"
  description="Your changes have been published."
/>;

Custom actions — last one is the primary:

<Alert
  visible={visible}
  onClose={close}
  title="Delete file?"
  description="This cannot be undone."
  actions={[
    { label: 'Cancel', onPress: close },
    { label: 'Delete', onPress: confirmDelete, tone: 'danger' },
  ]}
/>

Props

Prop	Type	Default	Description
visible	boolean	—	Controls whether the alert is shown.
onClose	() => void	—	Called on backdrop press and used as the default OK action when actions is omitted.
title	string	—	Heading rendered inside the alert; also used as the modal's accessibilityLabel.
description	string	—	Optional secondary copy below the title.
actions	readonly AlertAction[]	[{ label: 'OK', onPress: onClose }]	Action buttons. Each AlertAction is { label, onPress?, tone? }. The last action is rendered as solid; the rest as ghost.

Accessibility

Wraps Modal, so platform focus capture and the Android back gesture (calling onClose) are inherited. The title is passed as the modal's accessibilityLabel so screen readers announce it on open. Action buttons receive native accessibilityRole="button" from the underlying Button component.