Button <kui-button>

Use Kotchi UI custom buttons that are built upon Bootstrap’s button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Attributes Configurations

Kotchi UI buttons are very flexable to configure and control

Below is a list of the available attributes for configuring <kui-button>

Attribute Type Default value Description
kui-style KUIButton.Style KUIButton.Style.Secondary Predefined styles that serves different semantic purposes
kui-size KUIButton.Size Predefined sizes smaller or bigger than the default one
kui-outline Boolean false Display the button in an outline style
kui-disabled Boolean false Sets the button in a disabled state

Basic Examples

With Kotchi UI you can easily create buttons with configurable predefined styles
Primary Secondary Information Dangerous Success Warning Link 
                        
	<kui-button kui-style="kui-button-primary">Primary</kui-button>
	<kui-button kui-style="kui-button-secondary">Secondary</kui-button>
	<kui-button kui-style="kui-button-info">Information</kui-button>
	<kui-button kui-style="kui-button-dangerous">Dangerous</kui-button>
	<kui-button kui-style="kui-button-success">Success</kui-button>
	<kui-button kui-style="kui-button-warning">Warning</kui-button>
	<kui-button kui-style="kui-button-link">Link</kui-button>

Button Different Sizes

In need for different button sizes, no worries we have 4 different sizes for your convenient.
Small buttons
Primary Secondary Information
Large buttons
Warning Danger Sunccess
Block buttons
Primary block 1 Primary block 2 Primary block 3 
                        
<h5>Small buttons</h5>
<kui-button id="button-size-1" kui-size="kui-button-small" kui-style="kui-button-primary">Primary</kui-button>
<kui-button id="button-size-2" kui-size="kui-button-small" kui-style="kui-button-secondary">Secondary</kui-button>
<kui-button id="button-size-3" kui-size="kui-button-small" kui-style="kui-button-info">Information</kui-button>
<h5>Large buttons</h5>
<kui-button id="button-size-4" kui-size="kui-button-large" kui-style="kui-button-warning">Warning</kui-button>
<kui-button id="button-size-5" kui-size="kui-button-large" kui-style="kui-button-danger">Danger</kui-button>
<kui-button id="button-size-6" kui-size="kui-button-large" kui-style="kui-button-success">Sunccess</kui-button>
<h5>Block buttons</h5>
<kui-button id="button-size-7" kui-size="kui-button-block" kui-style="kui-button-primary">Primary block 1</kui-button>
<kui-button id="button-size-8" kui-size="kui-button-block" kui-style="kui-button-primary">Primary block 2</kui-button>
<kui-button id="button-size-9" kui-size="kui-button-block" kui-style="kui-button-primary">Primary block 3</kui-button>

Outline buttons

In need of a button, but not the hefty background colors they bring? add the kui-outline attribute to remove all background images and colors on any button.
Primary Secondary Information Warning Danger Sunccess 
                        
<kui-button id="button-outline-1" kui-outline="" kui-style="kui-button-primary">Primary</kui-button>
<kui-button id="button-outline-2" kui-outline="" kui-style="kui-button-secondary">Secondary</kui-button>
<kui-button id="button-outline-3" kui-outline="" kui-style="kui-button-info">Information</kui-button>
<kui-button id="button-outline-4" kui-outline="" kui-style="kui-button-warning">Warning</kui-button>
<kui-button id="button-outline-5" kui-outline="" kui-style="kui-button-danger">Danger</kui-button>
<kui-button id="button-outline-6" kui-outline="" kui-style="kui-button-success">Sunccess</kui-button>

Disabled state

Make buttons look inactive by adding the kui-disabled boolean attribute to any <kui-button> element.
Primary Secondary Information Warning Danger Sunccess 
                        
<kui-button id="button-outline-1" kui-disabled="" kui-style="kui-button-primary">Primary</kui-button>
<kui-button id="button-outline-2" kui-disabled="" kui-style="kui-button-secondary">Secondary</kui-button>
<kui-button id="button-outline-3" kui-disabled="" kui-style="kui-button-info">Information</kui-button>
<kui-button id="button-outline-4" kui-outline="" kui-disabled="" kui-style="kui-button-warning">Warning</kui-button>
<kui-button id="button-outline-5" kui-outline="" kui-disabled="" kui-style="kui-button-danger">Danger</kui-button>
<kui-button id="button-outline-6" kui-outline="" kui-disabled="" kui-style="kui-button-success">Sunccess</kui-button>