Pill

A pill is a visual representation of an attribute, usually representing tags or metrics.

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage


import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return <Pill>Label</Pill>;
}

#
Different sizes

Use the size prop to modify the size of the button.


import { Group } from "@optiaxiom/react";
import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Group gap="16">
      <Pill size="xs">Extra Small</Pill>
      <Pill>Small</Pill>
    </Group>
  );
}

#
Dismissible

Use the onDismiss prop to show a close button inside the pill.


"use client";
 
import { toaster } from "@optiaxiom/react";
import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return <Pill onDismiss={() => toaster.create("Dismissed pill")}>Label</Pill>;
}

#
Disabled state

Set the disabled prop to true to disable pills and prevent any interactions.

For accessibility please make sure to include text that explains why the button is disabled or use a tooltip.


import { Tooltip } from "@optiaxiom/react";
import { Pill } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <Tooltip content="Disabled pill demo">
      <Pill disabled>Disabled</Pill>
    </Tooltip>
  );
}

#
Grouping pills

Use the <PillGroup /> component to group related pills together.


import { Pill, PillGroup } from "@optiaxiom/react/unstable";
 
export function App() {
  return (
    <PillGroup>
      <Pill>Configured Commerce</Pill>
      <Pill>Campaign</Pill>
    </PillGroup>
  );
}

#
Related

Badge

Use to emphasize a status, count, state or value.

Button

Button component is used to trigger actions.

#
Props

#
Pill

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`onDismiss` Show a close button inside the pill and invoke this callback when the pill is clicked. `() => void`
`readOnly` When true, the pill is rendered as a non-interactive span element instead of a button. Use this for display-only pills that don’t respond to clicks. `false \| true`
`size` Control the size of the pill. `"xs" \| "sm"` Default: `sm`

#
PillGroup