# Render attributes

The function is used to render custom attributes on an element such as classes and data-attrbiutes. It supports the following properties:

<table data-header-hidden><thead><tr><th width="102"></th><th width="100"></th><th width="117"></th><th></th></tr></thead><tbody><tr><td><strong>Name</strong></td><td><strong>Type</strong></td><td><strong>Default</strong></td><td><strong>Description</strong></td></tr><tr><td>tag_id</td><td>String</td><td>‘wrapper’</td><td>Creates render attribute for tag id if doesn’t exists</td></tr><tr><td>attribute</td><td>String</td><td>‘class’</td><td>Adds an attribute to the tag_id</td></tr><tr><td>value</td><td>String</td><td></td><td>Adds the value to the mentioned attribute</td></tr></tbody></table>

In php files, `render attributes` function is used in the following examples:

**In options function**

```
public function options( $options ) {
$options->add_option(
     'icon_position',
            [
                'type'             => 'custom_selector',
                'title'            => __( 'Icon position', 'zionbuilder' ),
                'description'      => __( 'Choose icon position.' ),
                'default'          => 'left',
                'columns'          => 2,
                'options'          => [
                    [
                        'id'   => 'left',
                        'name' => 'left',
                    ],
                    [
                        'id'   => __( 'right', 'zionbuilder' ),
                        'name' => 'right',
                    ],                   
                ],
                'render_attribute' => [
                    [
                        'tag_id'    => 'button_styles',
                        'attribute' => 'class',
                        'value'     => 'zb-el-button--icon-{{VALUE}}',
                    ],
                ],
            ]
}
```

**In render function**

it combines the inherited attributes styles such as custom global classes with other classes attributes:

```
/**
 * Get style elements
 *
 * Returns a list of elements/tags that for which you
 * want to show style options
 *
  * @return void
 */
    public function on_register_styles() {
        $this->register_style_options_element(
            'button_styles',
            [
                'title'      => esc_html__( 'Button styles', 'zionbuilder' ),
                'selector'   => '{{ELEMENT}} .zb-el-button',
                'render_tag' => 'button_styles',
            ]
        );        
    }

public function render( $options ) {
/**
* gets the combined attributes from registered styles with classes attributes
*/
$combined_button_attr = $this->render_attributes->get_combined_attributes( 'button_styles', [ 'class' => 'zb-el-button' ] );

$button_text = 'link text';
$this->render_tag(
            'a,
            'button',
            [ $button_text ],
            $combined_button_attr
        );
}
```

**In vue component**

In vue component, to render the cstom attributes and classes, the following functions are used:

```
v-bind="api.getAttributesForTag('tag_id')"

:class="api.getStyleClasses('tag_id')"
```

```
<component
       v-bind="api.getAttributesForTag('button_styles')"
       :class="api.getStyleClasses('button_styles')"
></component>
```
