Chip

import { Chip } from '@/components/polaris';

function Example() {
    return (
        <div style={{ display: 'flex', gap: 8 }}>
            <Chip>Cotton</Chip>
            <Chip>Polyester</Chip>
            <Chip>Silk</Chip>
        </div>
    );
}

import { forwardRef, createElement } from 'react';

type Props = JSX.IntrinsicElements['s-chip'];

/**
 * Chip component - displays a small piece of information.
 *
 * @example
 * <Chip>Cotton</Chip>
 * <Chip color="strong">Featured</Chip>
 */
export const Chip = forwardRef<HTMLElement, Props>((props, ref) => createElement('s-chip', { ref, ...props }));

Chip.displayName = 'Chip';