Button

An abstraction over a <button>.

button specifics

• Pick the overall appearance with variant:

  • filled uses bright colors. (default)
  • light uses toned down colors.
  • outline
  • subtle
  • gradient
  • default

• Pick the color tint. It defaults to the theme's primaryColor, aka Mantine's blue.

• Opt for a fluid button (fill the container) with fullWidth.

• Opt for compact version with size, and control the font size.

• Show the loading spinner appearance (and disable the button) with loading. We customize the loader with loaderProps. (see Loader component)

• disabled, sets the appearance and behavior to disabled. the disabled appearance is the same across all variants.

• gradient, sets the gradient's colors and direction. It requires using the gradient variant.

other options

• leftSection, rightSection, for example for an icon.

<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 pressed inside a <form>. We set type=submit if needed.

providing an onClick handler

The handler specifies which action to perform on click. This action usually does not depend on any information related to the click event.

Still, the handler receives the event as an argument. If we define the handler somewhere else than inline, we must indicate its typing. The argument it takes is of type Event.

More specifically, the event is of type React.MouseEvent<HTMLButtonElement >.

The HTMLButtonElement type parameter indicates the type of the target of the event, which in this case is a <button> element.

The handler is not supposed to return anything.

Handler type signature

onClick: React.MouseEvent<HTMLButtonElement> => void

shortcut type

onClick: React.MouseEventHandler<HTMLButtonElement>