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