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"

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 adding secondary to the type you down size it automatically. Good use with a "Cancel"-button

Type dark-mode 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

Last updated