Skip to content

pantoken / renderers/web-components/src / button

Variable: button

const button: ElementDefinition

Alpha

<instui-button> — a token-styled <button>. The variant attribute maps to the -color-<variant> modifier (secondary, tertiary, success, danger, ai, …); margin adds spacing around the host (InstUI keywords like small / medium large); slotted content is the label.

It is also a native invoker: popovertarget (with optional popovertargetaction) toggles any light-DOM [popover] such as <instui-context-view>, <instui-popover>, or <instui-tray>, and command/commandfor drives the command-based components (<instui-modal> with --show/--close, etc.). The id is forwarded to the inner button via the invoker IDL, so it resolves across the shadow boundary and may point forward to an element declared later in the document.

Example

html
<instui-button variant="primary" margin="small">Save changes</instui-button>
<instui-button variant="danger" margin="small">Delete</instui-button>
<instui-button popovertarget="cv">Details</instui-button>
<instui-context-view id="cv">More about this item.</instui-context-view>
Save changesDeleteDetailsMore about this item.