UIChip

An chip component for presents selection and choices

Since: 7.0.0 (6.0.0)

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
selected	string	false	Set selected 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		Icon name from style-guide. Example arrow-right-bold (or (Deprecated) FontAwesome 4 icon. Example fa-user)
title	string		Title attribute presented on chip
tabindex	number	0	Provied tabindex. Use -1 to disable tab navigation
onRemoveBtnClick	function		Callback function when clicking remove button
onClick	function

Example

import {UIChip} from 'writer'

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

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

type

Available types

The UIChip.props.type has following variations:

Name

default

primary

draft

alert

pending

warning

done

schedule

brand