ModalTrigger
A labelled button that opens a matching Modal through the standard dialog runtime.
ModalTriggerOpen a review dialog
The target is the dialog ID without a hash. Close returns focus to the trigger.
<ModalTrigger target="trigger-review-dialog" label="Review release" tone="accent" />
<Modal id="trigger-review-dialog" title="Review release" size="sm" :showClose="true">
<p>The example release is ready for review.</p>
<template #footer>
<Btn data-modal-close variant="outline">Close review</Btn>
</template>
</Modal>A secondary trigger
More than one trigger can open the same dialog; each has its own label and treatment.
<ModalTrigger
target="trigger-review-dialog"
label="Open the same review"
tone="neutral"
variant="outline"
/>Behavior and accessibility
ModalTrigger renders a native button. Enter and Space activate it. The standard modal runtime opens the target dialog, manages focus and handles Escape. A matching Modal must exist in the page.
API reference
ModalTrigger contract
Props below are the public template API. RefOrValue accepts a literal or a reactive ref; bind refs with a colon-prefixed attribute. Native attributes and events can be passed through the component root.
target
string - Default
not set
ID of the target Modal, without #. This is not an anchor href.
label
RefOrValue<string> - Default
not set
Visible label. Use language that describes the control or value in its surrounding context.
tone
RefOrValue<SemanticTone> - Default
inherited
Semantic intent: neutral, accent, secondary, info, success, warning, danger, feature, custom or ghost. The active skin supplies the colors.
variant
RefOrValue<ComponentVariant> - Default
solid
Visual treatment. Accepts solid, surface, surfaceAlt, spotlight, glass, flat, flatAlt, flatSolid, outlineFill, outline, subtle, subtleBtn, link, sheen, underline, rail, bracket or none.
Composition
No slots. label supplies the text. Register defineModalComponents and defineButtonComponents. SSG includes the modal runtime when Modal is rendered.