Mantine UIFAQColors generator

Pill

Removable and non-removable tags

Source

View source code

Docs

Edit this page

Package

@thinker-core/mantine-core

Usage

React
Size
import { Pill } from '@thinker-core/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 '@thinker-core/mantine-core';

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

  return (
    <InputBase component="div" multiline>
      <Pill.Group>{pills}</Pill.Group>
    </InputBase>
  );
}

Left section

leftSection allow adding icons or any other element to the left side of the button. When a section is added, padding on the corresponding side is reduced.

Note that leftSection is flipped in RTL mode (leftSection is displayed on the right and remove button is displayed on the left).

React
import { IconCheck } from '@tabler/icons-react';
import { Pill } from '@thinker-core/mantine-core';

function Demo() {
  return  <Pill leftSection={<IconCheck />} withRemoveButton size="lg">Test pill</Pill>;
}

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
 *
 */

MultiSelect

PillsInput