UIPill

Pill component

Since: 7.1.0 (7.0.0)

Name

Type

Default

Description

text

string

Required - Text presented in pill

size

string

"\"normal\""

Size of the pill small|normal|large

type

string

"\"default\""

Type of pill look. See Available types for variations.

icon

string

Icon name from style-guide. Example arrow-right-bold.

Example

import {UIPill} from 'writer'

render($$) {
    const el = $$('div')

    return el.append(
        $$(UIPill, {
             text: 'I am a pill',
             type: 'primary',
             size: 'large',
             icon: 'picture-landscape-bold'
        })
    )
}

type

Available types

The UIButton.props.type has following variations:

Type dark is used on buttons on dark background

Name

default

primary

draft

pending

done

warning

alert

brand

dark

light

transparent

black

blur

blur dark

square default

square primary

square draft

square pending

square done

square warning

square alert

square brand

square dark

square light

square transparent

square black

square blur

square blur dark

Last updated