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

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

See more example for UIButton and UIChip below.

## UIButton

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

#### 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

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

![primary](/files/-LotnRgbKGMIWAU1IQfc)

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

![primary-outline](/files/-LotnI2n7alpMWc59q2K)

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

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

![default-outline-secondary, primary](/files/-LotnGnwMwjn8Go8oYNw)

#### Size (Optional)

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

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

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

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

![](/files/-LotvqU73MUwwzL8Ewq8)

## UIChip

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

![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)


---

# 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/6.0.0-1/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.