Modal

ModalElementProps

• accessibilityLabel

  A label that describes the purpose of the modal. When set, it will be announced to users using assistive technologies and will provide them with more context. This overrides the `heading` prop for screen readers.

  string

• heading

  A title that describes the content of the Modal.

  string

• id

  A unique identifier for the element.

  string

• padding

  Adjust the padding around the Modal content. `base`: applies padding that is appropriate for the element. `none`: removes all padding from the element. This can be useful when elements inside the Modal need to span to the edge of the Modal. For example, a full-width image. In this case, rely on `Box` with a padding of 'base' to bring back the desired padding for the rest of the content.

  'base' | 'none'

• size

  Adjust the size of the Modal. `max`: expands the Modal to its maximum size as defined by the host application, on both the horizontal and vertical axes.

  'small' | 'large' | 'base' | 'small-100' | 'large-100' | 'max'

export interface ModalElementProps extends Pick<ModalProps$1, 'accessibilityLabel' | 'heading' | 'id' | 'padding' | 'size'> {
    size?: Extract<ModalProps$1['size'], 'small-100' | 'small' | 'base' | 'large-100' | 'large' | 'max'>;
}

ModalElementEvents

• hide

  Callback fired after the overlay is hidden.

  ((event: CallbackEventListener<typeof tagName>) => void) | null

• show

  Callback fired after the overlay is shown.

  ((event: CallbackEventListener<typeof tagName>) => void) | null

export interface ModalElementEvents {
    /**
     * Callback fired after the overlay is hidden.
     */
    hide?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
    /**
     * Callback fired after the overlay is shown.
     */
    show?: ((event: CallbackEventListener<typeof tagName>) => void) | null;
}

CallbackEventListener

(EventListener & {
    (event: CallbackEvent<TTagName, TEvent>): void;
}) | null

CallbackEvent

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

ModalElementSlots

• primary-action

  The primary action to perform, provided as a button type element.

  HTMLElement

• secondary-actions

  The secondary actions to perform, provided as button type elements.

  HTMLElement

export interface ModalElementSlots {
    /**
     * The primary action to perform, provided as a button type element.
     */
    'primary-action'?: HTMLElement;
    /**
     * The secondary actions to perform, provided as button type elements.
     */
    'secondary-actions'?: HTMLElement;
}