Button
<esp-button>
Used to initiate a user action or link to another page.
Here are some different button color variants:
Slots
<esp-button> has a slot:
Default
Buttons have a default slot for an SVG icon. Icons can be used to give buttons visual cues:
Attributes
<esp-button> has the following attributes:
button-type
button-type has a default value of "button".
Controls the button type.
The available options are: button, submit, or reset.
The default value is button. To use a link instead of a
button, set the href attribute.
collapsed
collapsed has a default value of false.
By default, buttons take up the entire width of their parent
container. Use the collapsed attribute to shrink them to the
size of their content:
disabled
disabled has a default value of false.
Controls whether or not the button is disabled.
href
href has a default value of "".
If href is set, the button will be rendered as an anchor link pointing to the href value instead of a button.
icon-only
icon-only has a default value of false.
If true, the button only displays the icon.
label
label has a default value of "".
The label of the button.
loading
loading has a default value of false.
Controls whether or not the button is in a loading state. The button will be disabled and show a spinner while loading is true.
target
target has a default value of "".
If the button is a link, this specifies the target browser window.
rel
rel has a default value of "".
If the button is a link, this specifies the relationship
between the current page and the linked URL. Common values
include "noopener noreferrer" for external links opened
in a new tab.
formnovalidate
formnovalidate has a default value of false.
When true and button-type is "submit", the enclosing
form is submitted without running constraint validation.
Methods
<esp-button> has the following methods:
traverseToClosest
Traverse up the DOM tree to find the closest element that matches the selector. This method is aware of shadow DOM boundaries and will traverse through them to find the element.
Events
<esp-button> emits the following events:
clicked
clicked is of type CustomEvent.
Emitted when the button is clicked.
CSS Properties
<esp-button> has the following CSS properties:
--esp-button-padding
The padding inside the button label and icon areas.
--esp-button-incognito-padding
The padding for the incognito button style.
--esp-field-background
Background color of the shared field shell. Defaults to var(--esp-color-layer-2).
--esp-field-border-color
Border color of the shared field shell. Defaults to var(--esp-color-border).
--esp-field-border-width
Border width of the shared field shell. Defaults to 1px.
--esp-field-text-color
Text color used inside the shared field shell. Defaults to var(--esp-color-text).
--esp-field-hover-bg
Hover background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-bg
Focus background color of the shared field shell. Derived from --esp-field-background.
--esp-field-focus-shadow
Shadow color used for shared field focus treatment. Defaults to var(--esp-color-shadow).