Button

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

The button primarily operates standalone

Tag Definition

Used standalone:

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

JavaScript Object

SilkBuilder also creates a companion JavaScript object using the Button class to provide JavaScript programmatic interaction. This object will have the same name as the component's ID.

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

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.

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

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

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