Pill

Last updated: 2.0.0 (21/01/2024)

Usage

import { Pill } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Pill>
            I'm a pill!
        </Pill>
    )
}

With remove button

import { Pill } from "@valence-ui/core";

function MyComponent() { 
    return ( 
        <Pill
            withRemoveButton
            onRemove={() => console.log("Oh no!")}
        >
            I'm a pill!
        </Pill>
    )
}

The appearance, behavior and icon of this button can be modified by passing in removeButtonProps or removeButtonIcon props.

---

Props

Extends GenericLayoutProps and UnstyledButtonProps.

Property	Type	Description
variant	FillVariant	Fill variant of this pill. Defaults to theme default.
size	ComponentSize	Size class of this pill. Defaults to theme default.
radius	ComponentSize	Border radius of this pill. Defaults to theme default.
withRemoveButton	boolean	Whether to include a remove button. false by default.
removeButtonIcon	ReactNode	Icon to use for the remove button. Defaults to IconX.
removeButtonProps	Omit<IconButtonProps, "children">	Optional props to pass to the remove button.
onRemove	() => void	Callback to be called when the remove button is clicked.
textProps	Omit<TextProps, "children">	Optional props to pass to the Text component.
children	string