Components

Alert

Alert is a container that presents an alert dialog. Alert displays a modal dialog with a message and optional action buttons.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

function DefaultAlert() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Alert</Button>
      <Alert
        title="Alert"
        message="This is an alert message"
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
      />
    </>
  )
}

Simple Alert

Preview unavailable for this example in the static docs build.

Show code

function SimpleAlert() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Simple Alert</Button>
      <Alert
        title="Notice"
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
      />
    </>
  )
}

With Custom Buttons

Preview unavailable for this example in the static docs build.

Show code

function WithCustomButtonsDemo() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Alert with Custom Buttons</Button>
      <Alert
        title="Delete Item"
        message="Are you sure you want to delete this item? This action cannot be undone."
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
        buttons={[
          { label: 'Cancel', action: () => setIsVisible(false), style: 'cancel' },
          { label: 'Delete', action: () => { setIsVisible(false); alert('Deleted!') }, style: 'destructive' }
        ]}
      />
    </>
  )
}

With Multiple Buttons

Preview unavailable for this example in the static docs build.

Show code

function WithMultipleButtonsDemo() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Alert with Multiple Buttons</Button>
      <Alert
        title="Choose Action"
        message="What would you like to do?"
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
        buttons={[
          { label: 'Cancel', action: () => setIsVisible(false), style: 'cancel' },
          { label: 'Save', action: () => { setIsVisible(false); alert('Saved!') } },
          { label: 'Delete', action: () => { setIsVisible(false); alert('Deleted!') }, style: 'destructive' }
        ]}
      />
    </>
  )
}

Warning Alert

Preview unavailable for this example in the static docs build.

Show code

function WarningAlert() {
  const [isVisible, setIsVisible] = useState(false)

  return (
    <>
      <Button onClick={() => setIsVisible(true)}>Show Warning</Button>
      <Alert
        title="Warning"
        message="This action may have unintended consequences. Please proceed with caution."
        isVisible={isVisible}
        onDismiss={() => setIsVisible(false)}
        buttons={[
          { label: 'Cancel', action: () => setIsVisible(false), style: 'cancel' },
          { label: 'Continue', action: () => setIsVisible(false) }
        ]}
      />
    </>
  )
}

API

Prop	Type	Required	Description
`title`	`string`	Yes	The title of the alert.
`message`	`string`	No	The message body of the alert.
`isVisible`	`boolean`	Yes	Whether the alert is visible.
`onDismiss`	`() => void`	Yes	Callback fired when the alert should be dismissed.
`buttons`	`IAlertButton[]`	No	The buttons to display in the alert.

Inherits additional props from IBaseComponent.

Overview

Alert is a container that presents an alert dialog. Alert displays a modal dialog with a message and optional action buttons.

SwiftUI Correspondence: Similar to SwiftUI's alert() modifier.

Simple Alert

Alert without a message:

Notes

Alert requires isVisible and onDismiss props
Alert supports custom buttons with different styles
Button styles: 'default', 'cancel', 'destructive'
Alert automatically shows a backdrop
Alert is modal and blocks interaction with underlying content

Best Practices

Clear messages: Use clear, concise messages
Button labels: Use descriptive button labels
Destructive actions: Use 'destructive' style for dangerous actions
Dismiss handling: Always provide onDismiss handler
Accessibility: Ensure alerts are accessible and keyboard navigable

ActivityIndicator

ActivityIndicator is a view that displays a spinning indicator to show that a task is in progress. ActivityIndicator is commonly used to indicate loading states.

AllowsHitTesting

AllowsHitTesting adapts SwiftUI's `allowsHitTesting(_:)` modifier into an explicit interaction wrapper for web overlays and disabled hit regions.

Alert

Examples

API

Overview

Simple Alert

Notes

Best Practices

On this page