UIButton

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

Since: 7.0.0 (6.0.0)

Name	Type	Default	Description
label	string		Required - The text of the label
enabled	boolean	true	(Deprecated) Use disabled instead
disabled	boolean	false	To disabled button
selected	boolean	false	Selected state or not
icon	string		Icon name from style-guide. Example arrow-right-bold (or (Deprecated) FontAwesome 4 icon. Example fa-user). Prefix text
type	string	""primary""	Type of button look. See Available types for variations
size	string	""normal""	Size of button. Variants: large|normal|small
width	string		Width of button. Variants: block|full
onClick	function		Callback for when the button 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)
        })
    )
}

type

Available types

The UIButton.props.type has following variations:

Type dark is used on buttons on dark background

Name
default
secondary
primary
draft
alert
pending
warning
done
schedule
brand
alert outlined
dark default
dark primary
dark outlined
dark negative primary
dark secondary
text default
text primary
text dark default
text dark black