Removable and non-removable tags



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

function Demo() {
  return <Pill>React</Pill>;

Inside inputs

Pill component is designed to be used inside inputs. It can be used to create custom multi select or tag inputs.

Item 0Item 1Item 2Item 3Item 4Item 5Item 6Item 7Item 8Item 9
import { Pill, InputBase } from '@mantine/core';

function Demo() {
  const pills = Array(10)
    .map((_, index) => (
      <Pill key={index} withRemoveButton>
        Item {index}

  return (
    <InputBase component="div" multiline>

Styles API

Pill supports Styles API, you can add styles to any inner element of the component withclassNames prop. Follow Styles API documentation to learn more.

Test pill

Component Styles API

Hover over selectors to highlight corresponding elements

 * Hover over selectors to apply outline styles