Button

import {Button} from '@gravity-ui/uikit';

Los botones actúan como desencadenantes de ciertas acciones. Si bien este es su propósito principal, en algunos casos muy raros, pueden usarse como enlaces para navegar a otras páginas.

§Apariencia

Hay cuatro Button tipos en términos de apariencia: básica, delineada, plana y de contraste. La Button apariencia está determinada por la view propiedad.

§Básico

action: El tipo más distintivo de Button. Se usa para la acción principal en una pantalla que requiere más atención. Recomendamos usar solo un botón de este tipo por página.

normal: Tipo predeterminado: Button diseñado para acciones secundarias o para mantener la importancia de una acción sin llamar demasiado la atención sobre ella.

raised: Se coloca por encima del contenido como un elemento flotante, normalmente con una ubicación fija.

<Button view="action" size="l">Action</Button>
<Button view="normal" size="l">Normal</Button>
<Button view="raised" size="l">Raised</Button>

§Esbozado

outlined: Se usa para acciones secundarias que requieren menos atención. Se puede usar con o sin botón principal; en el primer caso, debe ser uno enfatizado.

outlined-action: Suele utilizarse como enlace a otra página o recurso externo.

Este tipo también tiene variaciones semánticas que se pueden usar cuando se necesita semántica adicional: outlined-info, outlined-success outlined-warning, y. outlined-danger

<Button view="outlined" size="l">Outlined</Button>
<Button view="outlined-action" size="l">Outlined Action</Button>
<Button view="outlined-info" size="l">Outlined Info</Button>
<Button view="outlined-success" size="l">Outlined Success</Button>
<Button view="outlined-warning" size="l">Outlined Warning</Button>
<Button view="outlined-danger" size="l">Outlined Danger</Button>
<Button view="outlined-utility" size="l">Outlined Utility</Button>

§Plano

flat: Se usa para acciones auxiliares que requieren la menor atención. Se utiliza a menudo en una lista de botones o iconos de acción (sin texto) de un editor.

flat-secondary: Menos enfatizado que el flat botón. Suele utilizarse como botón secundario en cuadros de diálogo y ventanas modales.

flat-action: Suele utilizarse como enlace a otra página o recurso externo.

También tiene variaciones semánticas que se pueden usar cuando se necesita una semántica adicional: outlined-info, , outlined-success outlined-warning, y. outlined-danger

<Button view="flat" size="l">Flat</Button>
<Button view="flat-secondary" size="l">Flat Secondary</Button>
<Button view="flat-action" size="l">Flat Action</Button>
<Button view="flat-info" size="l">Flat Info</Button>
<Button view="flat-success" size="l">Flat Success</Button>
<Button view="flat-warning" size="l">Flat Warning</Button>
<Button view="flat-danger" size="l">Flat Danger</Button>
<Button view="flat-utility" size="l">Flat Utility</Button>

§Contraste

Los flat-contrast botones normal-contrast outline-contrast, y resaltan las acciones sobre un fondo complejo, por ejemplo, en un banner o sobre un fondo inverso.

<Button view="normal-contrast" size="l">Normal Contrast</Button>
<Button view="outlined-contrast" size="l">Outlined Contrast</Button>
<Button view="flat-contrast" size="l">Flat Contrast</Button>

§Iconos

Para añadir un icono a un Button, utilice el Icon componente, que es un contenedor especial para SVG.

<Button view="outlined" size="l">
    <Icon data={Gear} size={18} />
    Start
</Button>
<Button view="outlined" size="l">
    End
    <Icon data={Gear} size={18} />
</Button>
<Button view="outlined" size="l">
    <Icon data={Gear} size={18} />
    Both
    <Icon data={Gear} size={18} />
</Button>
<Button view="outlined" size="l">
    <Icon data={Gear} size={18} />
</Button>

§Estados

A Button puede tener diferentes estados:

disabled: Cuando el botón no está disponible por algún motivo.

loading: Cuando algunos procesos asincrónicos se ejecutan en segundo plano.

selected: Cuando el usuario puede activar y desactivar el botón.

<Button size="l" disabled>Disabled</Button>
<Button size="l" loading>Loading</Button>
<Button size="l" selected>Selected</Button>

§Tamaño

Usa la size propiedad para administrar el Button tamaño. El tamaño predeterminado es m.

<Button size="xs">XS Size</Button>
<Button size="s">S Size</Button>
<Button size="m">M Size</Button>
<Button size="l">L Size</Button>
<Button size="xl">XL Size</Button>

§Anchura

Usa la width propiedad para administrar la forma en que Button se comporta dentro del contenedor:

auto: Limita el ancho máximo del Button ocultando el contenido desbordante con puntos suspensivos.

max: Hace coincidir el Button ancho con el ancho del contenedor principal y también oculta el contenido desbordante con puntos suspensivos.

<Button>Default</Button>
<Button width="auto">Auto</Button>
<Button width="max">Max</Button>

§Alfiler

La pin propiedad permite gestionar la forma de los bordes inicial y final y, por lo general, se utiliza para combinar varios botones en una sola unidad. El valor de la pin propiedad consiste en los nombres de estilo inicial y final separados por un guión, p. ej., round-brick. Los estilos de arista son: round (predeterminado) circle brick, y clear.

<div>
    <Button view="action" size="l" pin="round-clear">Create</Button>
    <Button view="action" size="l" pin="brick-round">...</Button>
</div>
<div>
    <Button view="normal" size="l" pin="circle-clear">Start</Button>
    <Button view="normal" size="l" pin="brick-brick" selected>Center</Button>
    <Button view="normal" size="l" pin="clear-circle">End</Button>
</div>
<div>
    <Button view="outlined" pin="brick-clear">1</Button>
    <Button view="outlined" pin="clear-clear">2</Button>
    <Button view="outlined" pin="clear-clear">3</Button>
    <Button view="outlined" pin="clear-brick">4</Button>
</div>

§Propiedades

Button acepta cualquier accesorio válido button o de a elemento además de estos:

§API CSS