UIButton

Create a simple button, or a button with a context menu button component.

Properties

Name	Type	Default	Description
label	string		Required - The text of the label
enabled	boolean	true	Set to false to disable button
icon	string		Font awesome class to use as an inline icon prefixed to the button text
type	string	"primary"	Type of button look. See Available types for variations
size	string		Size of button. Variants: large|small
contextIcon	string		Font Awesome class to use as a context icon
onClick	function		Callback for when the button is clicked
onContextClick	function		Optional callback for when context part is clicked

Example

import {UIButton} from 'writer'

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

    return el.append(
        $$(UIButton, {
            label: this.getLabel('My button'),
            onClick: () => {
                // Do something
            }
        })
    )
}

Example

import {UIButton} from 'writer'

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

    return el.append(
        $$(UIButton, {
            label: this.getLabel('My button'),
            size: 'small',
            type: 'done'
        })
        .on('click', () => {
            // Do something (substance event callback style)
        })
    )
}

Available types

The UIButton.props.type has following variations:

By add -secondary to the type you down size it automatically. Good use with a "Cancel"-button

Type -darkMode should be added if button is on dark background

Name
default
primary
draft
alert
pending
warning
done
schedule
brand
default-outlined
default-outlined-transparent
primary-inverted
draft-inverted
alert-inverted
pending-inverted
warning-inverted
done-inverted
schedule-inverted
brand-inverted
black-inverted