Pill

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

#
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 { 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>
  );
}

#
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`
`size` `"xs" \| "sm"` Default: `sm`

#
PillGroup

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`

#
Changelog

#
0.12.4

Added component