> For the complete documentation index, see [llms.txt](https://docs.navigaglobal.com/writer/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.navigaglobal.com/writer/6.3.5/developer-guide/writer-plugin-style-guide/ui-components.md).

# 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](/files/-LouDksaLQO-NeYvlxSe)

![Focus and selected state](/files/-LouDpGIMg7cYhJA3HCy)

```javascript
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 a type property so you can send in a space separated string ("primary small disabled") 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.

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

See more example for UIButton and UIChip below.

## UIButton

For technical implementation see [UI Components: UIButton](/writer/6.3.5/api-reference/uicomponents/uibutton.md)

Following properties decide style of the button.

#### 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 space (" "). It doesn't matter in which order it's applied. *Default: primary*

For more real example see example section below with pictures and example code.

| Type           | Description                                          |
| -------------- | ---------------------------------------------------- |
| {WRITER-COLOR} | Default, primary, alert etc.                         |
| outlined       | Get outline version                                  |
| dark           | Should be added if button is used on dark background |
| secondary      | Often used together with a primary button            |
| text           | Text styled button can be combined with color        |

#### Size (Optional)

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

| Type  | Description |
| ----- | ----------- |
| large |             |
| small |             |

#### Width (Optional)

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

| Type  | Description |
| ----- | ----------- |
| block |             |
| full  |             |

#### Icon (Optional)

Icon property is used with Font Awesome 4.0 naming.

### Styles and examples

![This is standard button available in the Writer](/files/-M3HJJLCZBUXagz1kdrD)

Examples

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

// Default button
$$(UIButton, {
    type: 'default'
})

// Alert outlined
$$(UIButton, {
    type: 'alert outlined'
})
```

```javascript
// Cancel button with 
$$(UIButton, {
    label: 'Cancel',
    type: 'secondary'
})

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

![](/files/-LotnGnwMwjn8Go8oYNw)

![Buttons on dark background](/files/-M3HJU16b5XL48pcnrOg)

Examples

```javascript
// Dark outline button
$$(UIButton, {
    type: 'dark outlined'
})

// Dark Negative Primary button
$$(UIButton, {
    type: 'dark negative primary'
})

// Dark default
$$(UIButton, {
    type: 'dark default'
})
```

![](/files/-M3HJU18I1vCwFSpPBIH)

Examples

```javascript
// Text Default button
$$(UIButton, {
    type: 'text default'
})

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

![](/files/-M3HJU19PRpmuBjIFrA6)

Examples

```javascript
// Default icon button
$$(UIButton, {
    type: 'primary',
    icon: 'fa-plus'
})

// Text Primary icon button
$$(UIButton, {
    type: 'text primary',
    icon: 'fa-plus'
})
```

#### Width

![](/files/-M3HJU1AWChjjXLGlrgo)

```javascript
// Block
$$(UIButton, {
    label: 'Block button',
    width: 'block'
})
```

#### Sizes

![](/files/-M3HJU1B3Hy09T7PnRB0)

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

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

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

## UIButtonGroup

For technical implementation see UI Components: UIButtonGroup

![](/files/-M3L07gDzhNLh89zKtfX)

## UIIconButton

For technical implementation see: [UI Components: UIIconButton](/writer/6.3.5/api-reference/uicomponents/uiiconbutton.md)

![](/files/-M3L2Id-qZwvKpZzegWY)

## UIChip

For technical implementation see: [UI Components: UIChip](/writer/6.3.5/api-reference/uicomponents/uichip.md)

![Default, small, micro](/files/-Lou1di_OUpEfba3CD1v)

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

Examples

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

![](/files/-Lou1dibu9rpXAbmIJ8D)