UIChip

An chip component for presents selection and choices

Since: 6.5.0 (6.0.0)

Properties

Name

Type

Default

Description

value

string

Required - Value presented in chip

size

string

"normal"

Variations normal|large|small

type

string

"default"

Style for the chip. See Available types for variations

disabled

string

false

Set disabled state for the chip

avatarComponent

VirtualHTMLElement

UIAvatar component or other VirtualElement

thumbnail

VirtualHTMLElement

Deprecated. Use props avatarComponent instead

avatarUrl

string

Url to avatar

icon

string

FontAwesome 4 icon. Example fa-user

onRemoveBtnClick

function

Required - Callback function when clicking remove button

onSelectChange

function

Callback if we want to have select state

Example

import {UIChip} from 'writer'

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

    return el.append(
        $$(UIChip, {
            value: 'Author name',
            avatarUrl: 'https://image.png',
            onRemoveBtnClick: () => {}
        })
    )
}

Available types

The UIChip.props.type has following variations:

Name

default

primary

draft

alert

pending

warning

done

schedule

brand

Last updated