Button

An abstraction over a <button>.

variants

• Pick a variant:
  • filled uses bright colors. (default)
  • default
  • light uses toned-down colors.
  • outline
  • subtle
  • gradient

button-specific props

• Pick the button's primary color. It defaults to the theme's primaryColor, aka Mantine's blue. It applies to several parts of the button, such as the border, the background and sometimes the text, unless the text is white or black.
• Opt for a fluid button (fill the container) with fullWidth.
• Opt for compact version with size, which changes the font size, the height and the horizontal padding.
• gradient, when using the gradient variant, sets the gradient's colors and direction,.

other options

• disabled, sets the appearance and behavior to disabled. the disabled appearance is the same across all variants.
• leftSection, rightSection, for example for an icon.
• Show the loading spinner appearance (and disable the button) with loading. We add props to the loader with loaderProps (see Loader component).

<Button rightSection={<IconDownload size={14} />}>Download</Button>

Button not submitting form by default

Mantine adds type=button on the underlying <button>. It prevents the button from triggering the form submit, when inside a <form>. We set type=submit if needed.

providing an onClick handler

The handler receives the click event, of type React.MouseEvent<HTMLButtonElement, MouseEvent>.

We can ignore the event argument and perform an action regardless.

The handler is not supposed to return anything.

If we define the handler in a separate location, we can annotate its type:

React.MouseEvent<HTMLButtonElement> => void;
// shortcut version:
React.MouseEventHandler<HTMLButtonElement>