---
title: "button · RUAL Documentation"
description: "Generates a basic html button element with default styling."
canonical: https://docs.rual.nl/block-types/state%20ui/state_button_content
language: en
---

# button

This block is part of the [`state ui`](https://docs.rual.nl/block-types/state%20ui) group and was last modified in core [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

Generates a basic html button element with default styling.

- content required `state` Content to be shown within the button.

- Type `value` Gives the option to overwrite the type.

Default `button`

- icon `value` Icon to be shown next to the button, be aware to include the icon font in your HTML/template. Icon can be updated using `state.icon`

- icon: style `uistyle` Style inline CSS style for the icon • Hidden when unused

- icon: class `uiclass` Assigns a CSS class to the icon. • Hidden when unused

- class `uiclass` Assigns a CSS class to the element. • Hidden when unused

- style `uistyle` Applies inline CSS style to the element • Hidden when unused

- attributes `uiattributes` Adds custom attributes to the element. • Hidden when unused

- events `v14.0.1` `stateevents` Adds event support to the element • Hidden when unused

- state `state` Returns the element to the frontend state.

A typical wiring for [button](https://docs.rual.nl/block-types/state%2520ui/state_button_content): [execute](https://docs.rual.nl/block-types/modal%2520functions/inpinfunction_select) feeds the `inpinfunction` pin; [custom text](https://docs.rual.nl/block-types/state%2520ui/state_text) feeds the `content` pin; [custom](https://docs.rual.nl/block-types/ui%2520class/uiclass_custom) feeds the `iconclass` pin; [value](https://docs.rual.nl/block-types/value/value_default) feeds the `state` pin; the `state` out pin feeds [div](https://docs.rual.nl/block-types/state%2520ui/state_div).

![Studio canvas example for the button block: typical wiring for button.](https://docs.rual.nl/canvas-examples/state_button_content.png)

### Commonly used with

In production blueprints, this block is most often wired together with:

- [execute](https://docs.rual.nl/block-types/modal%20functions/inpinfunction_select): feeds into this block. Enables you to choose a function that can be passed to other actions.

- [div](https://docs.rual.nl/block-types/state%20ui/state_div): this block feeds into it. Creates a dynamic and customizable div element on your web page.

- [custom text](https://docs.rual.nl/block-types/state%20ui/state_text): feeds into this block.

- [custom](https://docs.rual.nl/block-types/ui%20class/uiclass_custom): feeds into this block. Custom class input.

### Version history

Introduced in [`v13.0.1`](https://docs.rual.nl/core-versions/130001).

Last modified in [`v13.0.6`](https://docs.rual.nl/core-versions/130006).

- [v14.0.2](https://docs.rual.nl/core-versions/140002): This block or one of its pins was updated in `v14.0.2`, click here to see the release notes.

- [v14.0.1](https://docs.rual.nl/core-versions/140001): This block or one of its pins was updated in `v14.0.1`, click here to see the release notes.

- [Back to `state ui`](https://docs.rual.nl/block-types/state%20ui): Return to the main group to view all sub-groups

- [Back to `state elements`](https://docs.rual.nl/block-types/state%20ui?group=state%20elements): Return to the group to view all blocks within this group