Saltar al contenido principal

Buttons

Un botón indica una acción. Permite que los usuarios sepan lo que sucederá cuando interactúen con él.

Existen 3 tipos de botón y cada variante tiene una función particular para el usuario. Es por esto que es muy importante que las diferentes variantes se implementen de forma consistente en todos los productos.

Botón primario​

Representa la acción principal que queremos que haga el usuario. Para llamar su atención, esta debe ser en color verde primario y el texto debe ir centrado. Así, el botón tendrá mayor peso visual y ayudará al usuario a ejecutar una acción.

pages/index.tsx
import { Button } from '@mui/material';

<Button variant="contained">Primario</Button>;

Botón secundario​

Solo se pueden usar junto con un botón principal. La función del botón secundario se ajusta a acciones en un segundo plano, como “Cancelar” o “Atrás”.

pages/index.tsx
import { Button } from '@mui/material';

<Button variant="outlined">Secundario</Button>;

Botón auxiliar​

Se utiliza para aquellas acciones menos relevantes; generalmente se usa junto con un botón principal.

pages/index.tsx
import { Button } from '@mui/material';

<Button variant="text">Auxiliar</Button>;

Prueba el componente​

https://app.punto99.mx/

Editor en vivo
<Button variant="contained" onClick={() => alert('Hola Agave')}>
  Open Modal
</Button>

Resultado
Loading...

Acerca de la propiedad 'color'​

aviso

La propiedad Color no se usará en los botones 👎.

Con el color primario 👎​

// Invalid variants
<Button variant="contained" color="primary">Primario</Button>
<Button variant="outlined" color="primary">Secundario</Button>
<Button variant="text" color="primary">Auxiliar</Button>

Con el color secundario 👎​

// Invalid variants
<Button color="secondary">Primario</Button>
<Button variant="outlined" color="secondary">Secundario</Button>
<Button variant="text" color="secondary">Auxiliar</Button>