Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Pill

v.1.0.0 | Saturn

Usage

The name of the object of tokens to style pill is PILL_STYLES.

You can not change the name of the object of tokens.

There are two props that allow to modify different aspects of the component:

  • Variant: modify the general styles of the pill.
  • Size: modify the sizes styles of the pill.

Variants and sizes

Variants can modify the styles attending to the different sizes and inner states of the pill.

123456
enum PillStateType {
  DEFAULT = STATES.DEFAULT,
  SELECTED = STATES.SELECTED,
  DISABLED = STATES.DISABLED,
  DISABLED_SELECTED = STATES.DISABLED_SELECTED,
}

The tokens used are:

12345678910
const PILL_STYLES = {
  [SIZE]:{
    [VARIANT]: {
      [STATE]: {
        altVariant?: boolean;
        container?: CommonStyleType;
        container_focus?: {
          z_index?: number;
          outline?: string;
          box_shadow?: string;

Example

pill theme object example:

12345678910
const PILL_STYLES = {
  [SIZE]: {
    [VARIANT]: {
      [STATE]: {
        container: {
          padding: 'padding',
          cursor: 'cursor',
          background_color: 'color',
        },
        input: {
PillCode API
PillAccessibility