Explore Patterns
ButtonsComplete set of buttons to serve as primary, secondary and auxiliary actions, that can use both text and icons. They can be set to display a loading icon and prevent consequent clicks.
Usage
To create these custom buttons use links, instead of buttons, and add the provided classes - Button, along with Success, Cancel, Link, Danger, Icon or Small. To use icons within the custom button wrap the RichWidget’s Icon block with the link. To enable the Loading behaviour, which prevents consequent clicks while the request is undergoing, add the Load class.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ButtonDropdownButton which triggers a dropdown of links.
Usage
Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ButtonGroupA row of buttons grouped in single element. Available in groups of 2, 3, 4 or 5.
Usage
Add a label to each of the placeholders, along with a radio button. All radio buttons need to be bound to same variable. On smartphones, the button group becomes vertically stacked.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
CalendarUsed to select a date or simply check the calendar and allows to be displayed on smartphones instead of reverting to the native picker.
Usage
Drag to the Web Screen and set up the parameters, the only mandatory one is the InputWidgetId which must reference an input widget to store the selected date.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
FileUploadPattern to hold a file upload widget and a label, also allows file uploads from mobile devices.
Usage
Drag your file upload widget and write your label for the file upload. After the widget is configured, create a button to save the file.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
InputWithIconCustomize an input with an Icon.
Usage
Just drag your input and choose the desired icon.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
IconDropdownIcon button with a dropdown menu. Commonly used with a "cog" icon to display more settings or actions.
Usage
Fill in the label of the dropdown icon and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
InlineDropdownSimilar to ButtonDropdown, but displayed as normal text, with a following caret.
Usage
Fill in the label of the dropdown button and add the required links on the dropdown list. Each item has to be a link in order to have the correct style. Empty dropdown items will not be rendered. Has the same behavior on mobile.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
RangeSliderSelect a single value between two range values or select an interval with two sliders.
Usage
Place the Web Block on your screen and drag an Input Widget on the Input Number placeholder. You may also drag a second Input on the other placeholder to select an interval. On the pattern properties, you have to select the min and max range values and optionally set a step to increment when sliding.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
SearchSimple search form pattern with a search icon.
Usage
Drag an Input Widget inside the placeholder to use as a search input.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
Select2Enhanced Combo box usable in forms.
Usage
Drag the pattern next to a Combo Box and bind the two in the WidgetId parameter or using a custom CSS class. You can also write a text to show if there are no results found.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
ToggleButtonA mobile friendly pattern to switch between two states.
Usage
After placing the Web Block on your Web Screen, drag a checkbox inside the placeholder and the pattern will automatically use it.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
Yes
VideoA simple way to embed video content directly into your web pages without the need for a third-party plug-in.
Usage
Drag the pattern to the screen and set the SourceFile with the URL of the video. The URL must be of a direct video file, not a website like Vimeo or YouTube, those servers provide their own embed code already.
Browser Support 
Modern Browsers
IE8+
Modern Devices 
Offline Support   
No
VISIT OUR FORUM
POST FEEDBACK
REPORT ISSUE
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.
Click here to see your activities