Represents a clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.

The button supports multiple visual variants, can render as an anchor (<a>) element when the href attribute is set, and is fully form-associated, acting as a native submit or reset control.

Slots
default — Renders the label of the button.
prefix — Renders content before the label of the button.
suffix — Renders content after the label of the button.
CSS Parts
base — The native button element of the igc-button component.
prefix — The prefix container of the igc-button component.
suffix — The suffix container of the igc-button component.

The command to invoke on the target element specified by commandfor. Part of the Invoker Commands API. Custom commands must start with two dashes (e.g. '--my-command').

command: string | undefined

The ID of the target element for the invoker command. Part of the Invoker Commands API.

commandfor: string | null

The target element for the invoker command. Resolved from the commandfor ID.

commandForElement: Element | null

When set, the button will be disabled and non-interactive.

disabled: boolean

Prompts the browser to download the linked resource rather than navigating to it. The optional value is used as the suggested file name. Only effective when href is set.

download: string | undefined

The URL the button points to. When set, the component renders as an <a> element instead of a <button>, enabling navigation on click. Use together with target, download, and rel for full anchor semantics.

href: string | undefined

The relationship between the current document and the linked URL. Accepts a space-separated list of link types (e.g. 'noopener noreferrer'). Only effective when href is set. When target="_blank" is used, setting rel="noopener noreferrer" is strongly recommended for security.

rel: string | undefined

Where to open the linked document. Only effective when href is set.

  • '_self' – current browsing context (default browser behavior).
  • '_blank' – new tab or window.
  • '_parent' – parent browsing context; falls back to _self if none.
  • '_top' – top-level browsing context; falls back to _self if none.
target: "_blank" | "_parent" | "_self" | "_top" | undefined

The type of the button, which determines its behavior and semantics.

  • 'button' – no default action; useful for custom JavaScript handlers.
  • 'submit' – submits the associated form when clicked.
  • 'reset' – resets the associated form fields to their initial values.

Ignored when the button is rendered as a link (i.e. href is set).

type: "reset" | "submit" | "button"

The variant of the button which determines its visual appearance.

  • contained – filled background; highest visual emphasis (default).
  • outlined – transparent background with a visible border.
  • flat – no background or border; lowest visual emphasis.
  • fab – floating action button shape; typically used for primary actions.
variant: ButtonVariant

The <form> element the button is associated with. Resolved through the standard form-association mechanism — either the closest ancestor <form> or the form referenced by the button's form attribute. Returns null when no form is associated. Relevant only when type is 'submit' or 'reset'.

get form(): HTMLFormElement | null

Returns HTMLFormElement | null

Simulates a mouse click on the button, triggering its click handler and any associated form action.

click(): void

Returns void