Button JS UI Control

Buttons and Icons live demo

Overview

Buttons are fully customizable. You're free to change the size, style, and behavior of each button according to your needs.

For instance, to help users find the right button among the others, you can add icons to them. It's also possible to use image buttons or define custom HTML code that will describe the content of the button. And if you plan to create a chatting app or an email agent, the possibility to use badges that show the number of new messages, may become a pretty handy feature.

Buttons and Icons Key Features

Icon Buttons

Visual information is perceived better than text. Webix allows adding icons to buttons to help users quickly distinguish between them. The collection of Font Awesome icons is quite extensive, and you will surely find the one that that suits you best.

Image Buttons

There are different types of image buttons available: an image without borders that has a left-hand label, a borderless image with a bottom label, etc. You can set any width and height to a button to display any desired image.

Segmented Button

With Webix you can create a button that consists of several segments. It can be used to implement switching between available options or as a navigation element.

Toggle

The Toggle control is a two-state button. Pressed and unpressed states of the toggle button have a different appearance, which helps users understand whether a particular button is activated.

Styling

You can create custom styles for HTML buttons. Using CSS you can change the button itself, its text, icon or image.

Badges

Any button can be equipped with a badge containing a number. You can use the badges to inform users about recent events, such as newly received messages.

Autowidth

Using the autowidth property you can adjust the width of a button to the size of its content.

Other control widgets

Text

Slider

DoubleList

based on reviews of 49 customers