Button
Buttons are clickable markup elements, which lets the user take an action in the UI. They can be used for a multitude of purposes, like clicking [Ok] to continue, starting an upload, opening a window, or a menu. To guide the user's intuition about the nature of a button, it should be given an appropriate skin.
Basic Usage
<triton-button>
A button!
</triton-button>
<TritonButton>
A button!
</TritonButton>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-button>
A button!
</triton-button>
</body>
</html>
Variants
Button group
Create a button group by wrapping buttons in a <triton-button-group>.
This will apply a class on all the wrapped child-buttons.
<triton-button-group>
<triton-button>Button Label</triton-button>
<triton-button icon-leading="angle-swap-vertical">Button Label</triton-button>
<triton-button icon-trailing="plus">Button Label</triton-button>
<triton-button icon-trailing="plus"></triton-button>
</triton-button-group>
Split Button
A split button is a dual-function menu button with both a default action, and a list of selectable alternative actions.
<triton-button-split label="Split button action" >
<triton-menu-item>Button menu item 1</triton-menu-item>
<triton-menu-item>Button menu item 2</triton-menu-item>
<triton-menu-item>Button menu item 3</triton-menu-item>
<triton-menu-item>Button menu item 4</triton-menu-item>
<triton-button-split>
Icon Button
Icon buttons do not use labels and instead use icons or two letter abbrovation to convey meaning.
Create an icon button by setting iconTrailing or iconLeading without any label.
If the button should render with text insted of icon, pass in the fixedSquare property to force equal height and width.
/* With icon trailing */
<triton-button icon-trailing="plus"></triton-button>
/* OR, with icon leading */
<triton-button icon-leading="minus"></triton-button>
/* OR, with fixed square */
<triton-button fixed-square>AB</triton-button>
Float Button
The Float Button is layered above other UI elements and often has a fixed position on the screen. It is used mainly to invoke the primary action on a screen. A common example of this is a chat button, as seen on the websites of various companies.
To create a floating button, use the <triton-button-float> element, and configure its position to be either relative to other elements,
or to be fixed.
Below you will see several examples of float buttons, which are contained within a box.
/* place it based on relative position */
<triton-button-float position="<Position>" icon="chevron-left"></triton-button-float>
/* stick it to the edge of the window */
<triton-button-float stick-to-elm icon="chevron-up"></triton-button-float>
Appearance
Icons
The properties icon-leading and icon-trailing will determine the icons on the left and right side of the text respectively.
Using either of these in a button with no text will place the icon in the middle. To have an icon on both sides, both properties can be used.
These should only be set to valid icon strings.
<triton-button icon-leading="angle-swap-vertical">Icon Leading</triton-button>
<triton-button icon-trailing="plus">Icon Trailing</triton-button>
<triton-button icon-leading="info" icon-trailing="plus">Both Icons</triton-button>
<triton-button icon-trailing="plus"></triton-button>
Fluid
Use the fluid property to make the button fill the width of its container.
<triton-button fluid>A fluid button</triton-button>
Skin
Buttons can have different skins, which affects how they look.
Implementation of destructive skin is pending.
<triton-button skin="secondary">Secondary skin</triton-button>
<triton-button skin="neutral">neutral skin</triton-button>
<triton-button skin="flat">flat skin</triton-button>
<triton-button skin="destructive">destructive skin</triton-button>
Size
The following sizes are part of the Triton Design System, and can be accessed through the size property.
<triton-button size="small">Small Button</triton-button>
<triton-button size="base">Base Button</triton-button>
<triton-button size="large">Large Button</triton-button>
Playground
API
Properties
TritonButton
| Property | Description | Type | Default |
|---|---|---|---|
autofocus | This Boolean attribute specifies that the button should have inputfocus when the page loads. Only one element in a document can havethis attribute. | boolean | - |
classes | The CSS classes of the button | string | - |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
fixed-square | If true the button will be forced to be square shaped.This is useful when you want to display a button with 1 or 2 chars. | boolean | - |
fluid | If true, the element fills all available width | boolean | false |
form | This attribute lets you associate button elements toforms anywhere in the document, not just inside aform. It can also override an ancestor form element | string | - |
formaction | The URL that processes the information submitted by thebutton. Overrides the action attribute of the buttonsform owner. Does nothing if there is no form owner | string | - |
formenctype | If the button is a submit button it is associatedwith a form and does not have typebutton,specifies how to encode the form data that is submitted | application/x-www-form-urlencoded multipart/form-data text/plain | 'application/x-www-form-urlencoded' |
formmethod | If the button is a submit button its insideassociatedwith a form and doesnt have typebutton, this attributespecifies the HTTP method used to submit the form | get post | - |
formnovalidate | If the button is a submit button, this attributespecifies that the form is not to be validated when it issubmitted. If this attribute is specified, it overrides thenovalidate attribute of the buttons form owner | boolean | - |
formtarget | If the button is a submit button, this attribute is anauthor-defined name or standardized, underscore-prefixedkeyword indicating where to display the response from submittingthe form. This is the name of, or keyword for, a browsing contexta tab, window, or iframe. If this attribute is specified, itoverrides the target attribute of the buttons form owner | string | - |
hide-text | If true the button text is hidden | boolean | false |
href | A hyperlink to be activated upon clicking the button | string | - |
icon-leading | Icon to the left of text | Icon | - |
icon-trailing | Icon to the right of text | Icon | - |
name | The name of the button, submitted as a pair with the buttonsvalue as part of the form data | string | - |
size | Set the size of the component | base large small | 'base' |
skin | Set the skin of the component from preset optionsThe skin determines how the component looks | flat neutral primary secondary | 'primary' |
type | The default behavior of the button | button reset submit | - |
value | Defines the value associated with the buttons name when it is submittedwith the form data. This value is passed to the server in params when theform is submitted | string | - |
TritonButtonFloat
| Property | Description | Type | Default |
|---|---|---|---|
icon | icon | Icon | null |
position | position of the floating button | bottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight | 'bottomRight' |
size | Set the size of the component | base large small | 'base' |
skin | Skin | alarm critical flat information neutral primary secondary success warning | 'primary' |
skin-style | The button style null will render fill version of the button. In the next release, this will no longer be Internal | fill flat outline | 'fill' |
stick-to-elm | If id of element is given the floating button will try to find the element and stick to the edge of it. | boolean | false |
TritonButtonGroup
| Property | Description | Type | Default |
|---|---|---|---|
orientation | orientation of the parent tab render | horizontal vertical | 'horizontal' |
size | Set the size of the buttons in the group, this will override all other size prop in this group. | base body large medium small tiny xlarge xxlarge xxxlarge | 'body' |
TritonButtonSplit
| Property | Description | Type | Default |
|---|---|---|---|
autofocus | This Boolean attribute specifies that the button should have inputfocus when the page loads. Only one element in a document can havethis attribute. | boolean | - |
classes | The CSS classes of the button | string | - |
disabled | If true, the component will look disabled and not be interactable | boolean | false |
fixed-square | If true the button will be forced to be square shaped.This is useful when you want to display a button with 1 or 2 chars. | boolean | - |
form | This attribute lets you associate button elements toforms anywhere in the document, not just inside aform. It can also override an ancestor form element | string | - |
formaction | The URL that processes the information submitted by thebutton. Overrides the action attribute of the buttonsform owner. Does nothing if there is no form owner | string | - |
formenctype | If the button is a submit button it is associatedwith a form and does not have typebutton,specifies how to encode the form data that is submitted | application/x-www-form-urlencoded multipart/form-data text/plain | 'application/x-www-form-urlencoded' |
formmethod | If the button is a submit button its insideassociatedwith a form and doesnt have typebutton, this attributespecifies the HTTP method used to submit the form | get post | - |
formnovalidate | If the button is a submit button, this attributespecifies that the form is not to be validated when it issubmitted. If this attribute is specified, it overrides thenovalidate attribute of the buttons form owner | boolean | - |
formtarget | If the button is a submit button, this attribute is anauthor-defined name or standardized, underscore-prefixedkeyword indicating where to display the response from submittingthe form. This is the name of, or keyword for, a browsing contexta tab, window, or iframe. If this attribute is specified, itoverrides the target attribute of the buttons form owner | string | - |
href | A hyperlink to be activated upon clicking the button | string | - |
icon-leading | Icon to the left of text | Icon | - |
icon-trailing | Icon to the right of text | Icon | - |
label | The textual label to render in the primary button section | string | - |
name | The name of the button, submitted as a pair with the buttonsvalue as part of the form data | string | - |
size | Set the size of the component | base large small | 'base' |
skin | Set the skin of the component from preset optionsThe skin determines how the component looks | flat neutral primary secondary | 'primary' |
type | The default behavior of the button | button reset submit | - |
value | Defines the value associated with the buttons name when it is submittedwith the form data. This value is passed to the server in params when theform is submitted | string | - |
Events
Main Component
| Name | Type | Description | Extra |
|---|---|---|---|
| atClick | CustomEvent<void> | The default click behavior of the button | - |
TritonButtonSplit
| Name | Type | Description | Extra |
|---|---|---|---|
| atClick | CustomEvent<void> | The default click behavior of the button | - |
Slots
Main
Takes any kind of markup element, and will be rendered inside the button.
<triton-button>
<div></div>
</triton-button>