UI Components

States

If we are creating new content component and extends Component from substance we are getting state handling right out of the box. The different states we have more general, selected and focused. With this we can render different content and style based of that. A good example of component are the Image component in the content area.

Default state

Focus and selected state

import {Component} from "substance"

class MyComponent extends Component {

    render($$) {
        // Default things

        const nodeState = this.props.isolatedNodeState

        if (nodeState === 'focused' || nodeState === 'selected') {
            // Present this
        } 
        else {
            // Do something else
        }
    }
}

Components styles

We have introduced kebab casing (primary-small-disabled) naming convention for the latest of our components for give the component different styles. In that way it's easy to add and remove styles without extending the component props list and keep it more slim and readable.

$$(UIButton, {
    'type': 'primary-small'
})

See more example for UIButton and UIChip below.

UIButton

For technical implementation see UI Components: UIButton

Type (Optional)

To give the UIButton different style you should use the property type. You can provide different style with just applying different style with a "-". It doesn't matter in which order it's applied. Default: primary

Different styles

Type	Description
{WRITER-COLOR}	Default, primary, alert etc.
outline	Get outline version
secondary	Apply to "Cancel"-button to don't take up as much of attention as a call-to-action button

Examples

// Primary button
$$(UIButton, {
    type: 'primary'
})

primary

// Primary outline button
$$(UIButton, {
    type: 'outline-primary'
})

primary-outline

// Cancel button with 
$$(UIButton, {
    label: 'Cancel',
    type: 'default-outline-secondary'
})

// Primary button
$$(UIButton, {
    label: 'Apply',
    type: 'primary'
})

default-outline-secondary, primary

Size (Optional)

You also have the property size that can determines different style to the button

Type	Description
large
small

// Large
$$(UIButton, {
    label: 'Large',
    size: 'large'
})

// Default
$$(UIButton, {
    label: 'Default',
})

// Small
$$(UIButton, {
    label: 'Small',
    size: 'small'
})

UIChip

For technical implementation see Components: UIChip (should be a link later)

Default, small, micro

Property	Description
type (optional)	Default default. {Writer Color}
size (optional)	Default: default. small|micro

Examples

$$(UIChip, {
    thumbnail: 'nicklas.png',
    value: 'Nicklas Janresjö',
    type: 'alert'
})