Table of Contents
Note

This documentation describes the ToggleOverlayButton Vue component for native UI views for Xml templates see button with type="toggle-overlay".

ToggleOverlayButton

A button that toggles a named overlay (popover, panel, or modal) managed by the ViewModel's overlay system.

Import

import { ToggleOverlayButton } from '@neos/app'

Props

Prop Type Default Description
overlayId string — Required. The identifier of the overlay to toggle
animated boolean true Enable loading animation

Slots

Slot Description
default Button content (label, icon) — passed to the inner Button component

Usage Examples

Toggle a named overlay

<ToggleOverlayButton overlay-id="settings">
  <button label="Settings" icon="pi pi-cog" />
</ToggleOverlayButton>

In a toolbar

<HorizontalLayout space="small">
  <Toolbar />
  <ToggleOverlayButton overlay-id="auditLog">
    <button label="Audit Log" icon="pi pi-list" variant="secondary" />
  </ToggleOverlayButton>
</HorizontalLayout>

See Also