MUI Docs Infra Documentation

Warning

This is an internal project, and is not intended for public use. No support or stability guarantees are provided.

Alert Dialog API

Trigger

A button that opens the alert dialog. Renders a <button> element.

Prop	Type	Description
disabled	`boolean \| undefined`	Whether the trigger is disabled.
children	`React.ReactNode \| undefined`	Child elements.
className	`\| string \| ((state: AlertDialog.Trigger.State) => string) \| undefined`	CSS class applied to the trigger element. Can be a string or a function that receives the state.

AlertDialog.Trigger.Props

type AlertDialogTriggerProps = {
  /**
   * CSS class applied to the trigger element.
   * Can be a string or a function that receives the state.
   */
  className?: string | ((state: AlertDialog.Trigger.State) => string);
  /** Whether the trigger is disabled. */
  disabled?: boolean;
  /** Child elements. */
  children?: React.ReactNode;
}

AlertDialog.Trigger.State

type AlertDialogTriggerState = {
  /** Whether the alert requires user acknowledgment. */
  requiresAcknowledgment: boolean;
  /** Whether the dialog is currently open. */
  open: boolean;
  /** Whether the trigger is disabled. */
  disabled: boolean;
}

Close

A button that closes the dialog. Renders a <button> element.

Prop	Type	Description
children	`React.ReactNode \| undefined`	Child elements.
render	`\| (( triggerState: AlertDialog.Trigger.State, ) => React.ReactNode) \| undefined`	Render function that receives the trigger state. This demonstrates a component depending on another component’s state type.

AlertDialog.Close.Props

type AlertDialogCloseProps = {
  /**
   * Render function that receives the trigger state.
   * This demonstrates a component depending on another component's state type.
   */
  render?: (triggerState: DialogTriggerState) => React.ReactNode;
  /** Child elements. */
  children?: React.ReactNode;
}

import * as React from 'react';
import { TypesAlertDialog as AlertDialogTypes } from './types';

export function TypesAlertDialog() {
  return (
    <div>
      <h3>Alert Dialog API</h3>
      <h3>Trigger</h3>
      <AlertDialogTypes.Trigger />
      <h3>Close</h3>
      <AlertDialogTypes.Close />
    </div>
  );
}

ExpandCollapse