Button

Un botón ejecuta una acción o evento cuando se activa y admite tres apariencias visuales: accent, standard y subtle.

Uso

<script>
	import { Button } from 'fluentui-svelte';
</script>

<Button>I am a Button</Button>

API del componente

Una breve explicación de las props que realmente necesitan explicación. Puedes ver el resto de las props aquí.

As

Puedes controlar qué etiqueta debe usar el componente button: button, a o div.

Forma

Un botón puede ser redondeado, circular o cuadrado. Valor predeterminado: rounded.

Apariencia

Un botón puede tener su contenido y bordes estilizados para dar mayor énfasis o para verse más sutil.

Props del componente

Name	Type	Description
ref	HTMLElement	La referencia del DOM del elemento button.
as	string	El elemento del DOM que se renderiza. Valores posibles: 'button', 'a', 'div'.
disabled	boolean	Deshabilita la interacción del usuario.
shape	string	La forma del botón o de los botones. Valores posibles: 'circular', 'rounded', 'square'.
appearance	string	La apariencia del botón o de los botones. Valores posibles: 'accent', 'standard', 'subtle'.
disabledFocusable	boolean	Permite que el botón pueda recibir foco incluso cuando está deshabilitado.
isMenuButton	boolean	Agrega un ícono que indica que el botón activa un menú.
indicatorPosition	'before' | 'after'	La posición del ícono. Valores posibles: 'before', 'after'.
indicatorIcon	Snippet | Component	El ícono usado como indicador del menú. De forma predeterminada usa un ícono de chevrón hacia abajo.
Element Attributes		Según la etiqueta del componente elegida, tendrás autocompletado para todos los atributos HTML de esa etiqueta.

Botón dividido

Un split button es un tipo especial de botón que combina un botón estándar con un botón de menú para ofrecer a los usuarios una acción principal y opciones adicionales.

Uso

<script>
	import { SplitButton } from 'fluentui-svelte';
</script>

<SplitButton />
<SplitButton appearance="standard" />
<SplitButton appearance="subtle" />
<SplitButton shape="circular" />
<SplitButton shape="circular" appearance="standard" />
<SplitButton shape="circular" appearance="subtle" />

Agregar un menú

Para agregar un menú al split button, consulta la documentación de Menu para ver cómo crear menús y pasarlos como prop al componente SplitButton.

Props del componente

Name	Type	Description
wrapperRef	HTMLDivElement	La referencia del DOM del elemento contenedor del split button.
primaryButtonRef	HTMLButtonElement	La referencia del DOM del elemento del botón principal.
primaryButtonProps	ButtonProps<'button'>	Props adicionales que se pasarán al botón principal.
menuTriggerRef	HTMLButtonElement	La referencia del DOM del elemento del botón que activa el menú.
menuTriggerProps	ButtonProps<'button'>	Props adicionales que se pasarán al botón que activa el menú.
class	string	Clases adicionales que se agregan al elemento contenedor del split button.
shape	string	La forma del botón o de los botones. Valores posibles: 'circular', 'rounded', 'square'.
appearance	string	La apariencia del botón o de los botones. Valores posibles: 'accent', 'standard', 'subtle'.
disabled	boolean	Deshabilita la interacción del usuario.
WrapperElement Attributes	HTMLElement Attributes	Todos los demás atributos pueden aplicarse al elemento contenedor del split button.