### Description
Provide a custom link button or event trigger. The Button Link widget is highly versatile when executing different types of input and handles a variety of situations for an on-click action on a button. You can customize and associate custom templates with this widget.
### Instance Options
| Option | Property | Comments | Default Value | Source |
| ----- |:-----:| ---- | ---- | ---- |
| Type | `type` | Specify type of link (Page, URL, Catalog Category, Catalog Item, KB Topic, KB Article, KB Category) | `Default value` | Instance |
| Page | `sp_page` | Used to specify the page. | `Default value` | Instance |
| Template | `u_template` | Takes an id from a ngTemplate associated with the widget. These templates can be used to customize the layout of the widget. | `Default value` | Instance |
| Title | `title` | Used to specify the title text. | `Default value` | Instance |
| Short description | `short_description` | Specifies a short description to use below the title text. | `Default value` | Instance |
| Bootstrap color | `color` | Used to set the color of the background and title text for the widget. The property takes standard Bootstrap color values as a string (e.g. 'Default', 'Primary', 'Success', etc…) | `Default value` | Instance |
| Bootstrap class | `class` | Used to name the bootstrap class for the widget. | `Default value` | Instance |
| Image | `image` | Allows you to upload an image for use with a selected template. The value of this property sets the url() method in the CSS background property for all standard templates. | `Default value` | Instance |
| Show Panel | `show_panel` | Shows interactive buttons on a panel. | `true` | Options Schema |
| Background Color | `background_color` | The background color will be driven off of the Bootstrap color / 'color' variable. | `false` | Options Schema |
| Height | `height` | Used to specify the height of the widget's parent element. | `160px` | Options Schema |
| Target | `target` | Sets the value of the HTML target attribute. | `Default value` | Options Schema |
| Count Table | `count_table` | Specifies a table to use for the count. | `Default value` | Options Schema |
| Count Encoded Query | `count_encoded_query` | Used to specify the encoded query that you would like to use for the selected table to render the count. | `Default value` | Options Schema |
| Broadcast Event | `eventname` | Sets a $broadcast event name to fire when a user clicks on the widget. | `Default value` | Instance |
| Subscribe Event | `subscribe_event` | Handles a $on event name to use for the count. | `Default value` | Options Schema |
| RootScope Property | `rootscope_property` | Configure the global scope of a variable. | `Default value` | Options Schema |
### CSS/SASS Variables
_CSS/SASS variables are given default values that can be overridden with theming or portal-level CSS._
| Variable | Comments |
| -------- |:---|
| `$nr-buttonlink-image-size` | Used to set the height of an image, and the height and width of an icon. |
| `$nr-buttonlink-title-size` | Used to set the size of the title text. |
| `$nr-buttonlink-title-color` | Used to set the color of the title text. |
| `$nr-buttonlink-text-color` | Sets the color of the short description. |
| `$nr-buttonlink-background-size` | Sets the background size of the buttonlink-image template. |
### Templates
| Name | Comments |
| -------- |:---|
| `bl-card-template.html` | Standard card template using nr-card-template directive. |
| `image-panel.html` | Standard image panel template. |
| `icon-top.html` | Align top icon hover template. |
| `icon-left.html` | Align left icon hover template. |
| `image.html` | Standard image card template. |
| `background-image.html ` | Standard image background template. |
| `bt_animated_itmes.htm` | Animates over hover. |
.svg)
