Skip to main content
5.0.3Next5.1.05.0.35.0.25.0.15.0.04.0.94.0.84.0.73.2.03.1.03.0.13.0.02.1.12.0.101.0.0
Version: 5.0.3

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>
A button!

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.

Button LabelButton LabelButton Label
<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.

Button menu item 1Button menu item 2Button menu item 3Button menu item 4
<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.

AB
  /* 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.

Icon LeadingIcon TrailingBoth Icons
<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.

A fluid button
<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.

Secondary skinButton Labelflat skindestructive skin
<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.

Small ButtonBase ButtonLarge Button
<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

PropertyDescriptionTypeDefault
autofocusThis Boolean attribute specifies that the button should have inputfocus when the page loads. Only one element in a document can havethis attribute.boolean-
classesThe CSS classes of the buttonstring-
disabledIf true, the component will look disabled and not be interactablebooleanfalse
fixed-squareIf 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-
fluidIf true, the element fills all available widthbooleanfalse
formThis attribute lets you associate button elements toforms anywhere in the document, not just inside aform. It can also override an ancestor form elementstring-
formactionThe URL that processes the information submitted by thebutton. Overrides the action attribute of the buttonsform owner. Does nothing if there is no form ownerstring-
formenctypeIf 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 submittedapplication/x-www-form-urlencoded multipart/form-data text/plain'application/x-www-form-urlencoded'
formmethodIf the button is a submit button its insideassociatedwith a form and doesnt have typebutton, this attributespecifies the HTTP method used to submit the formget post-
formnovalidateIf 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 ownerboolean-
formtargetIf 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 ownerstring-
hide-textIf true the button text is hiddenbooleanfalse
hrefA hyperlink to be activated upon clicking the buttonstring-
icon-leadingIcon to the left of textIcon-
icon-trailingIcon to the right of textIcon-
nameThe name of the button, submitted as a pair with the buttonsvalue as part of the form datastring-
sizeSet the size of the componentbase large small'base'
skinSet the skin of the component from preset optionsThe skin determines how the component looksflat neutral primary secondary'primary'
typeThe default behavior of the buttonbutton reset submit-
valueDefines 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 submittedstring-

TritonButtonFloat

PropertyDescriptionTypeDefault
iconiconIconnull
positionposition of the floating buttonbottom bottomLeft bottomRight left leftBottom leftTop right rightBottom rightTop top topLeft topRight'bottomRight'
sizeSet the size of the componentbase large small'base'
skinSkinalarm critical flat information neutral primary secondary success warning'primary'
skin-styleThe button style null will render fill version of the button. In the next release, this will no longer be Internalfill flat outline'fill'
stick-to-elmIf id of element is given the floating button will try to find the element and stick to the edge of it.booleanfalse

TritonButtonGroup

PropertyDescriptionTypeDefault
orientationorientation of the parent tab renderhorizontal vertical'horizontal'
sizeSet 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

PropertyDescriptionTypeDefault
autofocusThis Boolean attribute specifies that the button should have inputfocus when the page loads. Only one element in a document can havethis attribute.boolean-
classesThe CSS classes of the buttonstring-
disabledIf true, the component will look disabled and not be interactablebooleanfalse
fixed-squareIf 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-
formThis attribute lets you associate button elements toforms anywhere in the document, not just inside aform. It can also override an ancestor form elementstring-
formactionThe URL that processes the information submitted by thebutton. Overrides the action attribute of the buttonsform owner. Does nothing if there is no form ownerstring-
formenctypeIf 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 submittedapplication/x-www-form-urlencoded multipart/form-data text/plain'application/x-www-form-urlencoded'
formmethodIf the button is a submit button its insideassociatedwith a form and doesnt have typebutton, this attributespecifies the HTTP method used to submit the formget post-
formnovalidateIf 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 ownerboolean-
formtargetIf 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 ownerstring-
hrefA hyperlink to be activated upon clicking the buttonstring-
icon-leadingIcon to the left of textIcon-
icon-trailingIcon to the right of textIcon-
labelThe textual label to render in the primary button sectionstring-
nameThe name of the button, submitted as a pair with the buttonsvalue as part of the form datastring-
sizeSet the size of the componentbase large small'base'
skinSet the skin of the component from preset optionsThe skin determines how the component looksflat neutral primary secondary'primary'
typeThe default behavior of the buttonbutton reset submit-
valueDefines 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 submittedstring-

Events

Main Component

NameTypeDescriptionExtra
atClickCustomEvent<void>The default click behavior of the button-

TritonButtonSplit

NameTypeDescriptionExtra
atClickCustomEvent<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>

Details

Depends on

Used in