Pill

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

#
Documentation

#
Usage

Label


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.

Extra Small

Small


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

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

Configured Commerce

Campaign


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`
`size` Control the size of the pill. `"xs" \| "sm"` Default: `sm`

#
PillGroup