Button

An abstraction over a <button>.

props

• variant, set the button overall appearance, such as filled, outline, subtle, gradient or default. defaults to filled
• color, set the button overall color. the coloring depends on the variant. defaults to the theme's primaryColor, aka Mantine's blue.
• leftSection, rightSection, for example for an icon.
• size, to specify two things. First, if it's a compact button with less inner space. second, if we want a smaller or bigger font size.
• fullWidth, to fill the parent's width
• disabled, sets the appearance and behaviour to disabled. the disabled appearance is the same across all variants.
• loading, sets the appearance to loading, aka loader overlaid on top, and the behaviour to disabled. We may customize the loader with loaderProps (see Loader component)
• gradient, sets the gradient's colors and direction. It requires using the gradient variant.

<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>.

The idea is for the developper to explicitely set type=submit on the Button if it is set to submit the form.

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>