> For the complete documentation index, see [llms.txt](https://docs.silkbuilder.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.silkbuilder.com/tags/button.md).

# Button

The <silk:Button> component generates an HTML button element styled with Bootstrap classes.

The button primarily operates standalone

## Tag Definition

Used standalone:

```xml
<silk:Button
  id=""
  label=""
  targetPage=""
  icon=""
  dock=""
  width=""
  cssClass="btn-primary"
  groupClass=""
  cssStyle=""
  renderIf=""
  extraProperties=""
  group="false"
  disabled="false"
  hidden="false"
  singleClick="true"
  autoEnable="true"
  confirmTitle=""
  confirmMessage=""
  confirmLabel=""
  confirmIcon=""
  toggleList=""
  logicGrid=""
  criteria=""
/>
```

### JavaScript Object

SilkBuilder also creates a companion JavaScript object using the [Button](https://github.com/silkbuider/documentation/tree/master/js_object/Button.js.md) class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID.

```xml
<silk:Button id="bt1" label="Click Me" />
<silk:JQcode>
  bt1.on("click", function(){
    silk.alert("I have been clicked!");
  });
</silk:JQcode>
```

### Dropdown Button

The component can host **silk:ButtonItem** components to be used as a dropdown button. The host button and the button items are treated like separate button entities.

```xml
<silk:Button id="parentBt" label="Options">
  <silk:ButtonItem id="bt1" label="Save" />
  <silk:ButtonItem id="bt2" label="Delete" />
</silk:Button>
```

## Properties

### id

The button's unique identifier.\
If the button's events are not going to be used, the id is not required.\
Default Value: *Empty*.

### label

The value is used as the button's label. It is not required if the button only shows an icon.\
Default Value: *Empty*.

### targetPage

The ID of the page to be shown when the button is clicked. This also works with *silk:Modal*.\
If opening a page/modal is the only button's functionality, then an ID is not necessary.\
Default Value: *Empty*.

### icon

The icon value is a class from a Font Awesome icon or the HTML containing the icon.\
Also these values can be used to add icons:\
\- The value "insert" adds a plus icon.\
\- The value "update" adds a pencil icon.\
\- The value "delete" adds a trash can icon.\
\- The value "cancel" adds an x-mark icon.\
\- The value "submit" adds a check icon.\
Default Value: *Empty*.

### dock

Defines the button's location if it is contained in a *silk:header* component. The values are: left, center, right.\
Default Value: *Empty*.

### width

Sets the button's fixed width. By default, the button's width will be changed based on its content.\
Default Value: *Empty*.

### cssClass

The classes to stylize the button. It expects Bootstrap classes. The button already has the "btn" class and is initialized with "btn-primary".\
Default Value: *btn-primary*.

### groupClass

The classes to stylize the button group. It expects Bootstrap classes."\
Default Value: *Empty*.

### cssStyle

To add extra styling using CSS styling elements.\
Default Value: *Empty*.

### renderIf

It contains the logic sentence defining whether the component should be rendered.\
The logic statement's explanation is in the [Server Code Logic](https://github.com/silkbuider/documentation/tree/master/tags/how_to/server_code_logic.md) documentation.\
Default Value: *Empty*.

### extraProperties

To add extra HTML properties not defined by the *silk:Button* component.\
Default Value: *Empty*.

### group

Adds Bootstrap classes to group the button.\
Default Value: *false*.

### disabled

Adds Bootstrap classes to group the button.\
Default Value: *false*.

### hidden

Initializes the button as hidden. Uses the CSS style `display: none;`.\
Default Value: *false*.

### singleClick

Initializes the button as single click if set to true. False will allow multiple consecutive clicks.\
Default Value: *true*.

### autoEnable

Sets the button to auto enable after a click. Only valid if singleClick is **true**.\
Default Value: *true*.

### confirmTitle

Sets the title of the confirmation dialog.\
Default Value: *Empty*.

### confirmMessage

Sets the message to show in the confirmation dialog.\
Default Value: *Empty*.

### confirmLabel

Sets the label for the accept button in the confirmation dialog.\
Default Value: *Empty*.

### confirmIcon

Sets the confirmation dialog icon.\
Default Value: *Empty*.

### toggleList

The list of comma-separated elements that will be toggled together with the component.\
The value "parent" toggles the immediate parent element.\
The value "grandpa" toggles the grandparent element.\
Default Value: *Empty*.

### logicGrid

Default Value: *Empty*.

### criteria

Default Value: *Empty*.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.silkbuilder.com/tags/button.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.