Ir al contenido
uiify

Framework

Next.jsTanStack StartAstroVike

Estilo

CSSTailwind

Tema

Idioma

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Button

Botón de acción con variantes y tamaños, incluida una opción de solo ícono.

Navegadores
Chrome 123+Firefox 121+Safari 17.5+
Nivel
0
Tamaño comprimido
340 B
Presupuesto de diseño forzado
0 ms
Presupuesto de axe
0
Compatible con SSR
Sí
Contrato publicado
Entorno de pruebas

Zona de pruebas

Predeterminado

Secundario

Contorno

Fantasma

Destructivo

Enlace

Cargando

Ejemplos

Variants

Pick a variant by emphasis. The default is the filled primary action — use one per view. secondary is a tonal fill for supporting actions, outline a bordered one, ghost shows a surface only on hover, destructive marks irreversible actions and link reads as inline text.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button>Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </>
  );
}

Sizes

sm is 32 px tall with 14 px text, md 44 px with 16 px and lg 56 px with 18 px. Omitting size gives md. Size and variant are independent, so every variant comes in every size.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button size="sm">Small</Button>
      <Button size="md">Medium</Button>
      <Button size="lg">Large</Button>
    </>
  );
}

With an icon

Put an icon next to the label as a child; the button spaces them 6 px apart. Mark decorative icons aria-hidden so the label stays the accessible name.

import { Button } from "@gunkin/uiify";

const plus = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

export default function Example() {
  return (
    <>
      <Button>{plus}Create</Button>
      <Button variant="secondary">{plus}Create</Button>
      <Button variant="outline">{plus}Create</Button>
    </>
  );
}

Icon only

A button is never narrower than it is tall. The icon-sm, icon and icon-lg sizes drop the side padding, so a single icon sits in a 32, 44 or 56 px circle. There is no visible text, so always add an aria-label.

import { Button } from "@gunkin/uiify";

const plus = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M12 5v14M5 12h14" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);
const close = (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true">
    <path d="M6 6l12 12M18 6L6 18" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

export default function Example() {
  return (
    <>
      <Button size="icon-sm" aria-label="Create">{plus}</Button>
      <Button size="icon" aria-label="Create">{plus}</Button>
      <Button size="icon-lg" aria-label="Create">{plus}</Button>
      <Button variant="secondary" size="icon" aria-label="Create">{plus}</Button>
      <Button variant="outline" size="icon" aria-label="Create">{plus}</Button>
      <Button variant="ghost" size="icon" aria-label="Close">{close}</Button>
    </>
  );
}

Selected

selected marks the chosen item of a set or a toggle that is on, in any variant, with the primary fill. Pass selected={false} for the off state of a toggle so it is still announced as one. Toggle, Toggle group, Segmented control, Pagination and Toolbar use this same state.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button variant="outline" selected>Bold</Button>
      <Button variant="outline" selected={false}>Italic</Button>
      <Button variant="ghost" selected>Bold</Button>
      <Button variant="ghost" selected={false}>Italic</Button>
    </>
  );
}

Disabled

disabled sets the native attribute on a <button>: it leaves the tab order, ignores clicks and shows no hover or pressed state. On any other element it sets aria-disabled and blocks activation instead.

import { Button } from "@gunkin/uiify";

export default function Example() {
  return (
    <>
      <Button disabled>Default</Button>
      <Button variant="secondary" disabled>Secondary</Button>
      <Button variant="outline" disabled>Outline</Button>
      <Button variant="destructive" disabled>Destructive</Button>
    </>
  );
}

API

Button

PropTipoPredeterminadoDescripción
variant"secondary" | "outline" | "ghost" | "destructive" | "link"—Énfasis visual, escrito en data-variant. Omítelo para la acción principal con relleno.
size"sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg"—Altura y espaciado mediante data-size (32, 44 o 56 px; md de forma predeterminada); los tamaños de ícono eliminan el espaciado lateral y necesitan aria-label.
selectedboolean—Establece data-selected para un elemento elegido o un botón de alternancia activo; un <button> nativo también recibe aria-pressed, salvo que se indique otro estado ARIA.
disabledbooleanfalseDesactiva el botón: usa el atributo nativo en un <button> y aria-disabled con la activación bloqueada en cualquier otro elemento.
type"button" | "submit" | "reset""button"Tipo de botón nativo, aplicado solo si el elemento renderizado es un <button>. Usa "submit" dentro de un formulario.
asElementType"button"Elemento o componente que se renderiza, por ejemplo "a" o un Link del enrutador. Recibe todas las props y la ref.
renderReactElement | ((props, state) => ReactElement)—Reemplaza el elemento renderizado y conserva las conexiones de comportamiento y accesibilidad.

Teclado

TeclaAcción
Enter / SpaceActivar
TabDar el foco

Accesibilidad

Renderiza un <button type="button"> nativo: el navegador proporciona foco, Enter y Space, y nunca envía un formulario por accidente. Con as o render, conserva el rol de ese elemento, por lo que un enlace sigue siendo un enlace. disabled es nativo en botones y se usa aria-disabled con tabindex="-1" en los demás elementos. selected se convierte en aria-pressed; un enlace seleccionado necesita aria-current. Los botones de solo ícono necesitan aria-label.

Puntos de estilo

data-uiify-buttondata-disableddata-selecteddata-variantdata-size--uiify-button-wash (colour of the glow in the upper half)--uiify-button-rim (colour of the top edge highlight)
Esta página se tradujo automáticamente y aún no se ha revisado.