ButtonIconBotón de icono

El componente Botón de icono se usa para ejecutar acciones secundarias.

Uso

Importa el componente cuando lo necesites:

import 'mdui/components/button-icon.js';

Importa el tipo TypeScript cuando lo necesites:

import type { ButtonIcon } from 'mdui/components/button-icon.js';

Uso:

<mdui-button-icon icon="search"></mdui-button-icon>

El atributo selected-icon define el nombre del icono de Material Icons en estado seleccionado. También puedes definir un elemento de icono para el estado seleccionado mediante el slot selected-icon.

<mdui-button-icon selectable icon="favorite_border" selected-icon="favorite"></mdui-button-icon>
<mdui-button-icon selectable icon="favorite_border">
  <mdui-icon slot="selected-icon" name="favorite"></mdui-icon>
</mdui-button-icon>

Fuente

Cuando el botón de icono está seleccionado, el atributo selected toma el valor true. También puedes añadir el atributo selected para que el botón de icono esté seleccionado por defecto.

<mdui-button-icon selectable selected icon="favorite_border" selected-icon="favorite"></mdui-button-icon>

Fuente

Enlace

Con el atributo href, el botón de icono actúa como enlace; también puedes usar download, target y rel.

<mdui-button-icon icon="search" href="https://www.mdui.org" target="_blank"></mdui-button-icon>

Fuente

Estados deshabilitado y de carga

El atributo disabled deshabilita el botón de icono; añade el atributo loading para añadir un estado de carga al botón de icono.

<mdui-button-icon disabled icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading icon="search" variant="tonal"></mdui-button-icon>
<mdui-button-icon loading disabled icon="search" variant="tonal"></mdui-button-icon>

Fuente

API

Propiedades

Atributo	Propiedad	Tipo	Predeterminado
`variant`	`variant`	`'standard' \| 'filled' \| 'tonal' \| 'outlined'`	`'standard'`
Variante del botón de icono. Los valores posibles son: `standard`: Adecuado para acciones de prioridad más baja `filled`: Efecto visual intenso, adecuado para acciones de alta prioridad `tonal`: Efecto visual entre `filled` y `outlined`, adecuado para acciones de prioridad media-alta `outlined`: Adecuado para acciones de prioridad media
`icon`	`icon`	`string`	-
Nombre del icono de Material Icons. También se puede establecer mediante el slot predeterminado.
`selected-icon`	`selectedIcon`	`string`	-
Nombre del icono de Material Icons para el estado seleccionado. También se puede establecer mediante `slot="selected-icon"`.
`selectable`	`selectable`	`boolean`	`false`
Indica si se puede seleccionar.
`selected`	`selected`	`boolean`	`false`
Indica si está seleccionado.
`href`	`href`	`string`	-
URL de destino del enlace. Si se define esta propiedad, el componente se representará como un elemento `<a>` y podrá usar las propiedades de enlace.
`download`	`download`	`string`	-
Nombre del archivo para el enlace de descarga. Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
Especifica dónde abrir el enlace. Los valores posibles son: `_blank`: Abrir el enlace en una nueva ventana `_parent`: Abrir el enlace en el marco principal `_self`: Predeterminado. Abrir el enlace en el marco actual `_top`: Abrir el enlace en la ventana completa Nota: Esta propiedad solo tiene efecto si se ha definido la propiedad `href`.
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
Relación entre el documento actual y el documento enlazado. Los valores posibles son: `alternate`: Versión alternativa del documento actual `author`: Autor del documento o artículo actual `bookmark`: Enlace permanente a la sección contenedora más cercana `external`: El documento referenciado no está en el mismo sitio que el documento actual `help`: Enlace a la documentación de ayuda relacionada `license`: El contenido principal del documento actual está cubierto por la licencia de derechos de autor del documento referenciado `me`: El documento actual representa al propietario del contenido enlazado `next`: El documento actual es parte de una serie y el documento referenciado es el siguiente de la serie `nofollow`: El autor o editor del documento actual no respalda el documento referenciado `noreferrer`: No incluye el encabezado `Referer`. Similar al efecto de `noopener` `opener`: Si el hipervínculo crea un contexto de navegación de nivel superior (es decir, el valor del atributo `target` es `_blank`), crea un contexto de navegación auxiliar `prev`: El documento actual es parte de una serie y el documento referenciado es el anterior de la serie `search`: Proporciona un enlace a un recurso que se puede utilizar para buscar el archivo actual y sus páginas relacionadas `tag`: Proporciona una etiqueta adecuada para el documento actual (identificada por la dirección dada) Nota: Disponible solo cuando se especifica el atributo `href`.
`autofocus`	`autofocus`	`boolean`	`false`
Indica si el componente debe recibir el foco automáticamente cuando la página termine de cargar.
`tabindex`	`tabIndex`	`number`	-
Orden del elemento al navegar con la tecla Tab.
`disabled`	`disabled`	`boolean`	`false`
Indica si está deshabilitado.
`loading`	`loading`	`boolean`	`false`
Indica si está en estado de carga.
`name`	`name`	`string`	`''`
Nombre del botón que se enviará con los datos del formulario. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href`.
`value`	`value`	`string`	`''`
Valor inicial del botón que se enviará con los datos del formulario. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href`.
`type`	`type`	`'submit' \| 'reset' \| 'button'`	`'button'`
Tipo del botón. El tipo predeterminado es `button`. Los tipos posibles son: `submit`: Al hacer clic en el botón, se enviarán los datos del formulario al servidor `reset`: Al hacer clic en el botón, se restablecerán todos los campos del formulario a sus valores iniciales `button`: Este tipo de botón no tiene comportamiento predeterminado Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href`.
`form`	`form`	`string`	-
Elemento `<form>` asociado. El valor de esta propiedad debe ser el `id` de un elemento `<form>` en la misma página. Si no se especifica esta propiedad, el elemento debe ser hijo de un elemento `<form>`. Con esta propiedad, puedes colocar el elemento en cualquier lugar de la página, no solo como hijo de un elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href`.
`formaction`	`formAction`	`string`	-
Especifica la URL a la que se enviará el formulario. Si se especifica esta propiedad, anulará el atributo `action` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href` y `type="submit"`.
`formenctype`	`formEnctype`	`'application/x-www-form-urlencoded' \| 'multipart/form-data' \| 'text/plain'`	-
Especifica el tipo de contenido al enviar el formulario al servidor. Los valores posibles son: `application/x-www-form-urlencoded`: Valor predeterminado cuando no se especifica este atributo `multipart/form-data`: Se usa cuando el formulario contiene un elemento `<input type="file">` `text/plain`: Nuevo en HTML5, para depuración Si se especifica esta propiedad, anulará el atributo `enctype` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha especificado la propiedad `href` y `type="submit"`.
`formmethod`	`formMethod`	`'post' \| 'get'`	-
Especifica el método HTTP utilizado al enviar el formulario. Los valores posibles son: `post`: Los datos del formulario se incluyen en el cuerpo de la solicitud y se envían al servidor `get`: Los datos del formulario se adjuntan al URI del formulario con `?` como separador, y el URI generado se envía al servidor. Se utiliza este método cuando el formulario no tiene efectos secundarios y solo contiene caracteres ASCII Si se define esta propiedad, anulará el atributo `method` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
`formnovalidate`	`formNoValidate`	`boolean`	`false`
Si se define esta propiedad, no se realizará la validación del formulario al enviarlo. Si se define esta propiedad, anulará el atributo `novalidate` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
`formtarget`	`formTarget`	`'_self' \| '_blank' \| '_parent' \| '_top'`	-
Dónde mostrar la respuesta recibida después de enviar el formulario. Los valores posibles son: `_self`: Opción predeterminada, abrir en el marco actual `_blank`: Abrir en una nueva ventana `_parent`: Abrir en el marco principal `_top`: Abrir en la ventana completa Si se define esta propiedad, anulará el atributo `target` del elemento `<form>`. Nota: Esta propiedad solo tiene efecto si no se ha definido la propiedad `href` y `type="submit"`.
	`validity`	`ValidityState`	-
Objeto de estado de validación del formulario, véase `ValidityState`.
	`validationMessage`	`string`	-
Si falla la validación del formulario, esta propiedad contendrá un mensaje informativo. Si la validación es correcta, esta propiedad será una cadena vacía.

Métodos

Nombre	Parámetros	Valor de retorno
`click`		`void`
Simula un clic del ratón en el elemento.
`focus`	`options: FocusOptions` (Opcional)	`void`
Establece el foco en el elemento actual. Puede pasarse un objeto como parámetro con las siguientes propiedades: `preventScroll`: Por defecto, cuando el elemento recibe el foco, la página se desplaza hasta mostrarlo. Si no quiere que la página se desplace, defina esta propiedad como `true`.
`blur`		`void`
Quita el foco del elemento actual.
`checkValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`.
`reportValidity`		`boolean`
Comprueba si el campo del formulario pasa la validación. Si falla, devuelve `false` y dispara el evento `invalid`; si la pasa, devuelve `true`. Si la validación falla, también muestra un mensaje de error en el componente.
`setCustomValidity`	`message: string`	`void`
Establece un mensaje de error personalizado. Si este mensaje no está vacío, indica que el campo no ha pasado la validación.

Eventos

Nombre
`focus`
Se dispara cuando recibe el foco.
`blur`
Se dispara cuando pierde el foco.
`change`
Se dispara cuando cambia el estado de selección.
`invalid`
Se dispara cuando falla la validación del campo del formulario.

Slots

Nombre
(predeterminado)
Componente de icono.
`selected-icon`
Elemento de icono que se muestra en el estado seleccionado.

CSS Parts

Nombre
`button`
Elemento interno `<button>` o `<a>`.
`icon`
Icono en estado no seleccionado.
`selected-icon`
Icono en estado seleccionado.
`loading`
Elemento `<mdui-circular-progress>` en estado de carga.

CSS Custom Properties

Nombre
`--shape-corner`
Tamaño de la esquina redondeada del componente. Se puede especificar un valor de píxel concreto; pero se recomienda hacer referencia a design tokens.

Capítulo anterior

Button Botón

Capítulo siguiente

Card Tarjeta

ButtonIconBotón de icono

Uso

Ejemplos

Icono

Forma

Seleccionable

Enlace

Estados deshabilitado y de carga

API

Propiedades

Métodos

Eventos

Slots

CSS Parts

CSS Custom Properties