UIPill

Pill component

Since: 7.2.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

outline

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 outline

square black

square blur

square blur dark