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

Last updated