Skip to main content

Agave Buttons

Buttons allow users to take actions, and make choices, with a single tap.

Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like:

  • Modal windows
  • Forms
  • Cards
  • Toolbars

Primary button​

Representar a la acción principal. Tiene mayor peso visual y ayuda al usuario a ejecutar una decisión.

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

<Button variant="contained">Primary</Button>

Secondary button​

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">Secondary</Button>

Auxiliar button​

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</Button>

Live editor​

https://app.punto99.mx/

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

Result
Loading...

About 'color' property​

warning

Color property will not be used on buttons 👎.

With primary color​

// Invalid variants
<Button variant="contained" color="primary">Primary</Button>
<Button variant="outlined" color="primary">Secondary</Button>
<Button variant="text" color="primary">Auxiliar button</Button>

With secondary color​

// Invalid variants
<Button color="secondary">Primary</Button>
<Button variant="outlined" color="secondary">Secondary</Button>
<Button variant="text" color="secondary">Auxiliar button</Button>