Pill

import { Pill } from '@proton/atoms';
Copy

This is a generic Pill component which accepts a color and a backgroundColor. If one of the colors is given, the other color will be generated automatically. If both colors are given, they will be used as they are. If no color is set, the default color is used.

Default color

() => <Pill>Text</Pill>

Color is set, backgroundColor is generated

() => <Pill color="#aa0867">Text</Pill>

BackgroundColor is set, color is generated

() => <Pill backgroundColor="#d2ffcc">Text</Pill>

Both colors are set

() => (
    <Pill color="#b90404" backgroundColor="#fff2b3">
        Text
    </Pill>
)

Sandbox

Try out different colors. A warning will be given when the color contrast is too low.

Props