# UI Components

Most of the UI component displayed here but for full list check out [API / UI Components](https://docs.navigaglobal.com/writer/api-reference/uicomponents)

### 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](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/oDAQr6lZOa6XR5gpGqFc/Ska%CC%88rmklipp%202019-09-16%2015.17.13.png)

![Focus and selected state](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/nvHND8oqvIcx1L3K9AAx/Ska%CC%88rmklipp%202019-09-16%2015.17.34.png)

```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.

## Naviga Content Icon Pack

Icons made and provided through the writer and used by UI components. When we're referring to icons this if the icons you can use.

Available icon for specific Writer version can be seen here: \
[Icons for Writer 7.0.0](http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/7.0.0/)\
[Icons for Writer 7.1.0](http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/7.1.0/)\
[Icons for Writer 7.2.0](http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/7.2.0/)\
[Icons for Writer 8.0.0](http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/8.0.0/)\
[Icons for Writer 8.1.0](http://content-icon-pack.s3-website-eu-west-1.amazonaws.com/writer/8.1.0/)

## UIButton

For technical implementation see [UI Components: UIButton](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uibutton)

### Some styles and examples

![This is standard button available in the Writer](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/V9Itqy1ZKD5kZKRvOfnT/Ska%CC%88rmklipp%202020-03-25%2016.19.43.png)

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'
})
```

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/biBnD0LDYvEsRWrcnieI/Ska%CC%88rmklipp%202019-09-16%2013.19.34.png)

![Buttons on dark background](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/quyx3VUUwjw4VH0KrxT4/Ska%CC%88rmklipp%202020-03-25%2016.19.52.png)

Examples

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

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

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

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/0QwDma8JeAN6B5XMVKZW/Ska%CC%88rmklipp%202020-03-25%2016.19.59.png)

Examples

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

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

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/7Wlus73hu6krvHnUXbMW/Ska%CC%88rmklipp%202020-03-25%2016.20.09.png)

Examples

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

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

#### Width

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/IyIfnbXPFfDlClHDwVVg/Ska%CC%88rmklipp%202020-03-25%2016.20.32.png)

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

#### Sizes

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/gYoZmqkqoEkkN31xMgGc/Ska%CC%88rmklipp%202020-03-25%2016.20.42.png)

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

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

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

## UIButtonGroup

### Implementation

For technical implementation see [UI Components: UIButtonGroup](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uibuttongroup)

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/ZEV30vrg4mXCKxsqBi82/Ska%CC%88rmklipp%202020-03-26%2009.45.19.png)

## UIIconButton

### Implementation

For technical implementation see: [UI Components: UIIconButton](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiiconbutton)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/Rt3otIcv5PGuUCiBSply/Ska%CC%88rmavbild%202020-08-24%20kl.%2011.31.19.png)

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/2o0rKXIcXAsulfrnU4nd/CleanShot%202020-08-24%20at%2011.44.24.png)

## UIChip

### Implementation

For technical implementation see: [UI Components: UIChip](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uichip)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/ZY4kkUiUJ1UYoOfKrh8T/Ska%CC%88rmavbild%202020-08-19%20kl.%2015.01.08.png)

Examples

```javascript
$$(UIChip, {
    avatarUrl: 'https://urltoimage.com/nicklas.png',
    value: 'Nicklas Janresjö',
    type: 'alert'
})
```

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/DOTBCZkugx6aQTHP7NE1/Ska%CC%88rmklipp%202019-09-16%2014.26.56.png)

## UICheckbox

### Implementation

For technical implementation see: [UI Components: UICheckbox](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uicheckbox)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/VCrZ3sXmt421dVBPayty/Ska%CC%88rmavbild%202020-08-19%20kl.%2014.57.58.png)

## UIToggle

### Implementation

For technical implementation see: [UI Components: UIToggle](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uitoggle)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/bwjpm7T3GMGTKahw3gfZ/Ska%CC%88rmavbild%202020-08-19%20kl.%2014.58.45.png)

## UITextarea

### Implementation

For technical implementation see: [UI Components: UITextarea](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uitextarea)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/OHEYbYmRYXSfKwLNgzAJ/Ska%CC%88rmavbild%202020-08-19%20kl.%2014.59.54.png)

## UIInputText

### Implementation

For technical implementation see: [UI Components: UIInputText](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiinputtext)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/XTP7iHjF4h5mNYCIPktt/Ska%CC%88rmavbild%202020-08-19%20kl.%2014.59.27.png)

## UISelect

### Implementation

For technical implementation see: [UI Components: UISelect](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiselect)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/HPvS9FVoZMBbhV8QB1mX/Ska%CC%88rmavbild%202020-08-19%20kl.%2015.03.27.png)

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/mkwARMRAmKLKIUd9VGA1/Ska%CC%88rmavbild%202020-08-19%20kl.%2015.03.10.png)

## UIAvatar

Used together with other components as complement. For example when presentation avatar in lists or in UIChip.

### Implementation

For technical implementation see: [UI Components: UIAvatar](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiavatar)

### Styles and examples

![Could be used inside list](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/CtoXCy3TwCIqxvqMlQLf/Ska%CC%88rmavbild%202020-08-24%20kl.%2009.58.25.png)

## UIDatePicker

### Implementation

For technical implementation see: [UI Components: UIDatePicker](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uidatepicker)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/FDFNCH82yh6KJBaaxX44/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.32.29.png)

![UIDatePicker can be used with two styles default or secondary](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/oKp1dNx8zTgBdVbP3v6M/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.32.37.png)

![You can apply prefix to presentation](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/f36JimV6TrvJ30PKH3Rz/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.32.57.png)

![Available sizes ](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/Mb6JXt3vtPMAR3pKYxd9/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.33.03.png)

## UITimePicker

Developed together with UIDatePicker. See sizes and prefix on UIDatePicker

### Implementation

For technical implementation see: [UI Components: UITimePicker](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uitimepicker)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/QkzibZQ6KuKrNSWtLpIy/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.40.39.png)

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/aic5HUsJhwjeyfKpi196/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.40.46.png)

## UIFieldEditor

An editor component that lets the user edit text fields on a node.

### Implementation

For technical implementation see: [UI Components: UIFieldEditor](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uifieldeditor)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/vsXozKAdmdErbKEyKia7/Ska%CC%88rmavbild%202020-08-24%20kl.%2010.50.54.png)

## UIInlineImage

Inline image component which rerenders itself when its FileNode is loaded.

### Implementation

For technical implementation see: [UI Components: UIInlineImage](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiinlineimage)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/0X7XdRaRs6mcLs8FeqpE/Ska%CC%88rmavbild%202020-08-24%20kl.%2011.28.56.png)

## UIByline

Byline component that will allow you to add authors to content

### Implementation

For technical implementation see: [UI Components: UIByline](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uibyline)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/dHt0HCitvIJ2NzCuaMtb/CleanShot%202020-08-25%20at%2014.27.07.png)

## UITooltip

### Implementation

For technical implementation see: [UI Components: UITooltip](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uitooltip)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/52b0mfZVwbZub0i5Vjjd/Ska%CC%88rmavbild%202020-08-25%20kl.%2014.33.03.png)

## UIPagination

### Implementation

For technical implementation see: [UI Components: UIPagination](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uipagination)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/vMtKxT2FLcbw5b0v2wX5/Ska%CC%88rmavbild%202020-12-14%20kl.%2010.33.33.png)

## UIDropdown

### Implementation

For technical implementation see: [UI Components: UIDropdown](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uidropdown)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/qSLMmx3wb3knbytiWV6M/Ska%CC%88rmavbild%202020-12-14%20kl.%2010.37.29.png)

| Property        | Description                                               |
| --------------- | --------------------------------------------------------- |
| size (optional) | Default: normal. huge \| large \| normal \| small \| tiny |

## UIPill

### Implementation

For technical implementation see: [UI Components: UIPill](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uipill)

### Styles and examples

**Rounded (default)**

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/3oVcc7P85oOekZNiDaqB/Ska%CC%88rmavbild%202020-12-14%20kl.%2010.44.04.png)

**Square**

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/KYdXdB8n943QnVYIb7UC/Ska%CC%88rmavbild%202020-12-14%20kl.%2010.44.12.png)

## UIIcon

### Implementation

For technical implementation see: UI Components: [UIIcon](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiicon)

For available icons see [Naviga Content Icon Pack](#naviga-content-icon-pack)

**Append weight to name if you take the name from above link**

### Styles and examples

```javascript
$$(UIIcon, {
    name: 'space-rocket-flying-regular',
    size: 20,
    color: '#000'
})
```

## UIButtonList

For technical implementation see: [UI Components: UIButtonList](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uibuttonlist)

For available icons see [Naviga Content Icon Pack](#naviga-content-icon-pack)

**Append weight to name if you take the name from above link**

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/74hx31MhGIdULQh6WAhz/Screenshot%202021-01-14%20at%2015.43.30.png)

## UIIconBadge

### Implementation

For technical implementation see: [UI Components: UIIconBadge](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiiconbadge)

For available icons see [Naviga Content Icon Pack](#naviga-content-icon-pack)

### Styles and examples

![Default, on dark background and blurred version](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/lTwkuGaXzV3MND1GgOkp/Ska%CC%88rmavbild%202021-08-17%20kl.%2015.21.05.png)

## UIIconButtonMenu

### Implementation

For technical implementation see: [UI Components: UIIconButtonMenu](https://docs.navigaglobal.com/writer/api-reference/uicomponents/uiiconbuttonmenu)

### Styles and examples

![](https://content.gitbook.com/content/S4N9bhfVoVIx4UgollO1/blobs/gxlEZT6GSJYgXvmYpIL6/Ska%CC%88rmavbild%202021-08-17%20kl.%2015.27.50.png)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.navigaglobal.com/writer/developer-guide/writer-plugin-style-guide/ui-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.