UnstyledButton

Usage

UnstyledButton resets default button styles, it is used as a base for all other button components. You can use it to as a base for custom polymorphic buttons.

import { UnstyledButton } from '@mantine/core';

function Demo() {
  return <UnstyledButton>Button without styles</UnstyledButton>;
}

Polymorphic component

UnstyledButton is a polymorphic component – its default root element is button, but it can be changed to any other element or component with component prop:

import { UnstyledButton } from '@mantine/core';

function Demo() {
  return <UnstyledButton component="a" />;
}

Polymorphic components with TypeScript

Note that polymorphic components props types are different from regular components – they do not extend HTML element props of the default element. For example, UnstyledButtonProps does not extend React.ComponentPropsWithoutRef'<'div'>' although button is the default element.

If you want to create a wrapper for a polymorphic component that is not polymorphic (does not support component prop), then your component props interface should extend HTML element props, for example:

import type { UnstyledButtonProps, ElementProps } from '@mantine/core';

interface MyUnstyledButtonProps extends UnstyledButtonProps,
  ElementProps<'a', keyof UnstyledButtonProps> {}

Expand code

If you want your component to remain polymorphic after wrapping, use createPolymorphicComponent function described in this guide.

Get element ref

import { useRef } from 'react';
import { UnstyledButton } from '@mantine/core';

function Demo() {
  const ref = useRef<HTMLButtonElement>(null);
  return <UnstyledButton ref={ref} />;
}