Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Form field Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
CDK
 Key managers Keycodes
Interface and examples language
English
Version
19.7.0
Button

koobiq buttons are available using native <button> or <a> elements.

Variants

There are two button variants, each applied as an attribute:

  • basic buttons;
  • icon buttons.
Basic buttons

Basic kbq-button buttons are rectangular buttons containing text only.

Button states Basic button's states

Icon buttons

Icon buttons consist of an icon and can contain text. To create an icon button, add the <i kbq-icon="icon_name"></i> element within <button kbq-icon-button> where "icon_name" is the name of a Koobiq icon. For example:

Add any text before or after the <i> element to place a button label to the right or to the left of the icon.

Colors

koobiq provides three button colors, applied using the color property with possible values theme, secondary, and error.

Progress indication

If processing an action takes more than 1-2 seconds, the progress indication ("loading") can be used. This shows that the system takes action, and the user won't wonder whether the button is working or not. To enable the button progress indication, use class="kbq-progress" which can be combined with other properties.

Docs Feedback
If you have any questions or would like to contribute to writing the documentation, please create an issue in our GitHub repository.