Icon Button
<gstock-icon-button>
|
GstockIconButton
API
Propiedades
| Nombre | Descripción | Reflects | Tipo | Por defecto |
|---|---|---|---|---|
color
|
The color of the icon 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 set.
|
string | undefined
|
-
|
|
href
|
When set, the underlying button will be rendered as an
<a> with this href instead of a
<button>.
|
string | undefined
|
-
|
|
label
|
A description that gets read by assistive devices. For optimal accessibility, you should always include a label that describes what the icon button does. |
string
|
-
|
|
icon
|
The icon of a registered custom icon library. |
string | undefined
|
-
|
|
size
|
The icon button’s size. |
|
'small' | 'medium' | 'large'
|
'medium'
|
src
|
An external URL of an SVG file. Be sure you trust the content you are including, as it will be executed as code and can result in XSS attacks. |
string | undefined
|
-
|
|
target
|
Tells the browser where to open the link. Only used when
href is set.
|
'_blank' | '_parent' | '_self' | '_top' | undefined
|
-
|
|
variant
|
The variant of the button. |
|
'outlined' | 'plain' | 'solid'
|
'solid'
|
updateComplete
|
A read-only promise that resolves when the component has finished updating. |
Aprende más sobre atributos y propiedades .
Eventos
| Nombre | React Event | Descripción | Event Detail |
|---|---|---|---|
gstock-blur-event
|
onGstockBlurEvent
|
Emitted when the icon button loses focus. | - |
gstock-focus-event
|
onGstockFocusEvent
|
Emitted when the icon button gains focus. | - |
Aprende más sobre eventos .
Slots
| Nombre | Descripción |
|---|---|
default
|
The icon button’s content. |
Aprende más sobre slots .
Métodos
| Nombre | Descripción |
|---|---|
click( )
|
Simulates a click on the icon button. |
focus(
|
Sets focus on the icon button. |
blur( )
|
Removes focus from the icon button. |
Aprende más sobre métodos .
Partes
| Nombre | Descripción |
|---|---|
base
|
The component’s base wrapper. |
Aprende más sobre partes CSS .
Dependencias
Este componente importa automáticamente las siguientes dependencias.