PillButton

PillButton es un checkbox con forma de píldora para filtros independientes y selecciones múltiples.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
</script>

<PillButton>Unread</PillButton>
<PillButton checked>Selected</PillButton>
<PillButton disabled>Disabled</PillButton>

No leídos No leídos No leídos

Uso

<script>
	import { PillButton } from 'fluentui-svelte';
	let unread = $state(false);
</script>

<PillButton name="filter" value="unread" bind:checked={unread}>Unread</PillButton>

Apariencia

Elige la apariencia filled, outline o brand. Cada apariencia admite estados seleccionados y sin seleccionar.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
</script>

<PillButton>Filled</PillButton>
<PillButton checked>Filled selected</PillButton>
<PillButton appearance="outline">Outline</PillButton>
<PillButton appearance="outline" checked>Outline selected</PillButton>
<PillButton appearance="brand">Brand</PillButton>
<PillButton appearance="brand" checked>Brand selected</PillButton>

Tamaño

size cambia el alto y la tipografía a la vez: small usa 24px/12px, medium 32px/14px, large 40px/16px y extra-large 48px/18px. Cada par indica el alto del control y la fuente en píxeles.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
</script>

<PillButton size="medium">Medium</PillButton>
<PillButton size="medium" checked>Medium selected</PillButton>
<PillButton size="small">Small</PillButton>
<PillButton size="small" checked>Small selected</PillButton>
<PillButton size="large">Large</PillButton>
<PillButton size="large" checked>Large selected</PillButton>
<PillButton size="extra-large">Extra large</PillButton>
<PillButton size="extra-large" checked>Extra large selected</PillButton>

Forma

Usa shape para elegir las esquinas circular, rounded o square. El valor predeterminado es circular.

Ver Código

<script lang="ts">
  import { PillButton, Avatar } from 'fluentui-svelte';
</script>

<PillButton shape="circular">Circular</PillButton>
<PillButton shape="circular" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Circular selected
</PillButton>
<PillButton shape="rounded">Rounded</PillButton>
<PillButton shape="rounded" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Rounded selected
</PillButton>
<PillButton shape="square">Square</PillButton>
<PillButton shape="square" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Square selected
</PillButton>

Selección y enlace

Usa bind:checked para sincronizar la selección con tu estado. Un clic o la tecla Espacio alterna el checkbox nativo; los cambios de estado externos también lo actualizan.

Ver Código

<script lang="ts">
  import { PillButton, Button } from 'fluentui-svelte';
  let checked = $state(false);
</script>

<PillButton bind:checked>Unread</PillButton>
<output>{checked ? 'Selected' : 'Not selected'}</output>
<Button type="button" appearance="standard" onclick={() => (checked = !checked)}>Toggle</Button>

No leídos Sin seleccionar

Deshabilitado

Usa disabled en píldoras individuales o en un fieldset que las contenga. Las opciones deshabilitadas no pueden recibir foco, alternarse ni enviar valores, aunque estén seleccionadas.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
</script>

<PillButton disabled>Disabled</PillButton>
<PillButton checked disabled>Selected and disabled</PillButton>
<PillButton appearance="outline" disabled>Disabled outline</PillButton>
<PillButton appearance="brand" checked disabled>Selected brand</PillButton>
<fieldset disabled>
  <legend>Disabled filters</legend>
  <PillButton name="filter" value="unread" checked>Unread</PillButton>
</fieldset>

Iconos

Usa icon para mostrar un icono Fluent antes del texto. Los iconos son decorativos; proporciona un nombre accesible mediante aria-label o aria-labelledby si no hay texto visible.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
  import CalendarMonthRegular from 'fluentui-icons-svelte/CalendarMonthRegular.svelte';
  import CheckmarkFilled from 'fluentui-icons-svelte/CheckmarkFilled.svelte';
</script>

<PillButton icon={CalendarMonthRegular}>Calendar</PillButton>
<PillButton icon={CheckmarkFilled} checked>Selected</PillButton>
<PillButton size="small" icon={CalendarMonthRegular}>Calendar</PillButton>
<PillButton size="large" icon={CalendarMonthRegular}>Calendar</PillButton>
<PillButton size="extra-large" icon={CalendarMonthRegular}>Calendar</PillButton>
<PillButton icon={CalendarMonthRegular} aria-label="Filter by calendar" />

Avatar

Usa media para un Avatar decorativo. El snippet recibe el shape actual; pásalo al avatar para mantener sus formas sincronizadas. Un componente recibe shape como prop. El contenido escala con size, conserva un margen uniforme de 4px y tiene prioridad sobre icon.

Ver Código

<script lang="ts">
  import { PillButton, Avatar } from 'fluentui-svelte';
</script>

<PillButton>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Alex
</PillButton>
<PillButton checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" image={{ src: 'https://i.pravatar.cc/96?img=47' }} />{/snippet}
  Alex
</PillButton>
<PillButton size="small">
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Alex
</PillButton>
<PillButton size="small" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" image={{ src: 'https://i.pravatar.cc/96?img=47' }} />{/snippet}
  Alex
</PillButton>
<PillButton size="large">
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Alex
</PillButton>
<PillButton size="large" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" image={{ src: 'https://i.pravatar.cc/96?img=47' }} />{/snippet}
  Alex
</PillButton>
<PillButton size="extra-large">
  {#snippet media({ shape })}<Avatar {shape} name="Alex" />{/snippet}
  Alex
</PillButton>
<PillButton size="extra-large" checked>
  {#snippet media({ shape })}<Avatar {shape} name="Alex" image={{ src: 'https://i.pravatar.cc/96?img=47' }} />{/snippet}
  Alex
</PillButton>

Varios filtros

Usa fieldset y legend para etiquetar opciones independientes. Enlaza cada píldora mediante bind:checked. Reutiliza name para enviar varios valores en un campo del formulario.

Ver Código

<script lang="ts">
  import { PillButton } from 'fluentui-svelte';
  let filters = $state({ unread: true, flagged: false, attachments: false });
</script>

<fieldset>
  <legend>Message filters</legend>
  <PillButton name="filter" value="unread" bind:checked={filters.unread}>Unread</PillButton>
  <PillButton name="filter" value="flagged" bind:checked={filters.flagged}>Flagged</PillButton>
  <PillButton name="filter" value="attachments" bind:checked={filters.attachments}>Attachments</PillButton>
</fieldset>
<output>{JSON.stringify(filters)}</output>

Filtros de mensajes

No leídos Destacados Adjuntos

{"unread":true,"flagged":false,"attachments":false}

Formularios

Configura name y value para enviar una píldora seleccionada. Admite los atributos nativos form, required, defaultChecked y disabled. Restablecer recupera defaultChecked y actualiza bind:checked. Un estado checked explícito tiene prioridad al inicio. required se aplica a cada píldora por separado.

Ver Código

<script lang="ts">
  import { PillButton, Button } from 'fluentui-svelte';
  let submitted = $state('');
  function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    submitted = JSON.stringify(new FormData(event.currentTarget).getAll('filter'));
  }
</script>

<form onsubmit={submit}>
  <PillButton name="filter" value="unread" defaultChecked>Unread</PillButton>
  <PillButton name="filter" value="flagged">Flagged</PillButton>
  <Button type="submit">Submit filters</Button>
</form>
<output aria-live="polite">{submitted}</output>

Formulario externo

Usa form para asociar una píldora con el id de un formulario que no la contiene. El envío, la validación y el restablecimiento siguen usando el checkbox nativo.

Ver Código

<script lang="ts">
  import { PillButton, Button } from 'fluentui-svelte';
  let submitted = $state('');
  function submit(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
    event.preventDefault();
    submitted = JSON.stringify(new FormData(event.currentTarget).getAll('filter'));
  }
</script>

<form id="filters-form" onsubmit={submit}>
  <Button type="submit">Submit filters</Button>
  <Button type="reset" appearance="standard">Reset</Button>
</form>
<PillButton form="filters-form" name="filter" value="unread" defaultChecked>Unread</PillButton>
<output aria-live="polite">{submitted}</output>

No leídos

Campo obligatorio y validación

required se aplica a este checkbox concreto. Acompaña aria-invalid con un mensaje enlazado mediante aria-describedby. El texto inválido, el borde y el mensaje de error usan --fs-system-critical.

Ver Código

<script lang="ts">
  import { PillButton, Button } from 'fluentui-svelte';
  let accepted = $state(false);
  let attempted = $state(false);
</script>

<form onsubmit={(event) => event.preventDefault()}>
  <PillButton
    name="accepted"
    value="yes"
    required
    bind:checked={accepted}
    aria-invalid={attempted && !accepted ? 'true' : undefined}
    aria-describedby={attempted && !accepted ? 'accept-error' : undefined}
    oninvalid={() => (attempted = true)}
  >Accept notifications</PillButton>
  <Button type="submit">Continue</Button>
</form>
{#if attempted && !accepted}
  <p id="accept-error" role="alert" style="color: var(--fs-system-critical);">Select this option to continue.</p>
{/if}

Uso con Label

Coloca PillButton dentro de Label para dar nombre al checkbox nativo. Configura label y labelPosition en el contenedor. También da nombre a las píldoras que solo muestran un icono. Para píldoras independientes, usa texto visible, aria-label o aria-labelledby.

Ver Código

<script lang="ts">
  import { PillButton, Label } from 'fluentui-svelte';
  import CalendarMonthRegular from 'fluentui-icons-svelte/CalendarMonthRegular.svelte';
</script>

<Label label="Message filter" labelPosition="above">
  <PillButton name="filter" value="unread">Unread</PillButton>
</Label>
<Label label="Calendar filter" labelPosition="before">
  <PillButton icon={CalendarMonthRegular} />
</Label>

Filtro de mensajes No leídos

Filtrar por calendario

Props de PillButton

Name	Type	Default	Description
`ref` bindable	`HTMLInputElement` \| `null`		La referencia DOM del checkbox nativo.
`wrapperRef` bindable	`HTMLElement` \| `null`		La referencia DOM de la superficie de la píldora.
`wrapperAttributes`	`HTMLAttributes<HTMLSpanElement>`		Atributos de la superficie de la píldora. Los atributos del input corresponden al propio componente.
`checked` bindable	`boolean` \| `null`		Indica si la píldora está seleccionada. Si se omite, `defaultChecked` determina el estado inicial.
`appearance`	`'filled'` \| `'outline'` \| `'brand'`	`'filled'`	La apariencia de la píldora.
`size`	`'small'` \| `'medium'` \| `'large'` \| `'extra-large'`	`'medium'`	El alto y el tamaño del texto de la píldora: `small` usa 24px/12px, `medium` 32px/14px, `large` 40px/16px y `extra-large` 48px/18px.
`shape`	`'circular'` \| `'rounded'` \| `'square'`	`'circular'`	La forma de la píldora: `circular`, `rounded` o `square`.
`icon`	`Snippet<[SVGAttributes<SVGElement>]>` \| `Component<SVGAttributes<SVGElement>>`		Un icono decorativo opcional de Fluent antes del contenido.
`media`	`Snippet<[PillButtonMediaProps]>` \| `Component<PillButtonMediaProps>`		Contenido visual decorativo antes del texto, normalmente un `Avatar`. Recibe el `shape` actual de la píldora; pásalo al componente visual. Se ajusta al alto del control con un margen uniforme de 4px. Tiene prioridad sobre `icon`.
`children`	`Snippet`		La etiqueta visible. Proporciona `aria-label` o `aria-labelledby` cuando no haya texto visible.
`HTMLInputAttributes` without `type`, `children`, `checked`, `size`, `on:`

Componentes

PillButton

Uso

Apariencia

Tamaño

Forma

Selección y enlace

Deshabilitado

Iconos

Avatar

Varios filtros

Formularios

Formulario externo

Campo obligatorio y validación

Uso con Label

Props de PillButton