Button

<gstock-button> | GstockButton

API

Properties

Name	Description	Type	Default
`caret`	Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior.	`boolean`	`false`
`color`	The color of the button.	`'brand' \| 'neutral' \| 'information' \| 'success' \| 'warning' \| 'danger'`	`'brand'`
`disabled`	Disables the button.	`boolean`	`false`
`download`	Tells the browser to download the linked file as this filename. Only used when `href` is present.	`string \| undefined`	`-`
`form`	The “form owner” to associate the button with. If omitted, the closest containing form will be used instead. The value of this attribute must be an id of a form in the same document or shadow root as the button.	`string`	`-`
`formAction` `formaction`	Used to override the form owner’s `action` attribute.	`string`	`-`
`formEnctype` `formenctype`	Used to override the form owner’s `enctype` attribute.	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	`-`
`formMethod` `formmethod`	Used to override the form owner’s `method` attribute.	`'post' \| 'get'`	`-`
`formNoValidate` `formnovalidate`	Used to override the form owner’s `novalidate` attribute.	`boolean`	`-`
`formTarget` `formtarget`	Used to override the form owner’s `target` attribute.	`'_self' \| '_blank' \| '_parent' \| '_top' \| string`	`-`
`href`	When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.	`string`	`''`
`iconPrefix` `prefix`	The prefix icon name.	`string \| undefined`	`-`
`iconSuffix` `suffix`	The suffix icon name.	`string \| undefined`	`-`
`loading`	Draws the button in a loading state.	`boolean`	`false`
`name`	The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.	`string`	`''`
`rel`	When using `href`, this attribute will map to the underlying link’s `rel` attribute. Unlike regular links, the default is `noreferrer noopener` to prevent security exploits. However, if you’re using `target` to point to a specific tab/window, this will prevent that from working correctly. You can remove or change the default value by setting the attribute to an empty string or a value of your choice, respectively.	`string`	`'noreferrer noopener'`
`size`	The size of the button.	`'small' \| 'medium' \| 'large'`	`'medium'`
`target`	Tells the browser where to open the link. Only used when `href` is present.	`'_blank' \| '_parent' \| '_self' \| '_top'`	`-`
`type`	The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.	`'button' \| 'reset' \| 'submit'`	`'button'`
`value`	The value of the button, submitted as a pair with the button’s name as part of the form data, but only when this button is the submitter.	`string`	`''`
`variant`	The variant of the button.	`'outlined' \| 'plain' \| 'solid'`	`'solid'`
`validity`	Gets the validity state object	`-`	`-`
`validationMessage`	Gets the validation message	`-`	`-`
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties .

Events

Name	React Event	Description	Event Detail
`gstock-blur-event`	`onGstockBlurEvent`	Emitted when the button loses focus.	-
`gstock-focus-event`	`onGstockFocusEvent`	Emitted when the button gains focus.	-

Learn more about events .

Slots

Name	Description
`default`	The button’s label.
`prefix`	A presentational prefix icon or similar element.
`suffix`	A presentational suffix icon or similar element.

Learn more about slots .

Methods

Name	Description
`click( )`	Simulates a click on the button.
`focus( options: FocusOptions )`	Sets focus on the button.
`blur( )`	Removes focus from the button.
`checkValidity( )`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.
`getForm( )`	Gets the associated form, if one exists.
`reportValidity( )`	Checks for validity and shows the browser’s validation message if the control is invalid.
`setCustomValidity( message: string )`	Sets a custom validation message. Pass an empty string to restore validity.

Learn more about methods .

CSS Parts

Name	Description
`base`	The component’s base wrapper.
`prefix`	The container that wraps the prefix.
`label`	The button’s label.
`suffix`	The container that wraps the suffix.

Learn more about CSS parts .

Dependencies

This component automatically imports the following dependencies.

<gstock-icon>