OPoppableFooter

OPoppableFooter places actions in the sticky footer of its closest surrounding dialog or drawer, including when it is declared in a nested component.

Usage

Step by step

1. Render OPoppableFooter anywhere below an ODialog or ODrawer.
2. Put primary actions in its default slot.
3. Set cancel to add an action that emits cancel and closes the surrounding poppable.

Example

The rendered example and its source come from the same Vue single-file component.

Interactive playground

Toggle the optional cancel action.

Show cancel action

Props

Prop	Type	Default	Description
cancel	string | boolean	undefined	Adds a cancel button. Pass a string to replace its accessible and visible label.

Events

Event	Payload	Description
cancel	none	Emitted immediately before the cancel button closes the surrounding poppable.

Slots

Slot	Props	Description
default	OPoppableFooterSlotProps	Provides actions aligned after the optional cancel button.

Related types

Type	Definition
OPoppableFooterSlotProps	interface OPoppableFooterSlotProps { /** Closes the surrounding dialog or drawer. */ close: (options?: OokoPoppableCloseOptions) => void; /** Context for the closest surrounding dialog or drawer. */ poppable: OokoPoppableContext; }

CSS custom properties

Custom property	Default	Description
none	none	No component-specific custom properties are exposed.

Override example

OPoppableFooter has no public CSS custom properties. Override the actions supplied in its slot with ordinary application CSS when required.

Accessibility

The optional cancel action is a nude neutral OButton, so it matches the other buttons, and has the visible string passed through cancel as its accessible name. Actions supplied by consumers retain their native semantics and names.

Behavior and edge cases

Outside a dialog or drawer the component renders nothing. Its default slot receives the closest poppable context and close(), allowing an action to close the correct container after its own work succeeds. The sticky action area remains visible while the poppable content scrolls.

The footer is teleported out of the content, so a submit button in it sits outside the <form> element. Place OPoppableFooter inside the OForm and use <OButton type="submit">: the button receives the form's id through its form attribute and submits it, with no manual wiring. A native <button type="submit"> needs form="<id>" set by hand.