Badge
Badges are labels which hold small amounts of information. They are primarily used to emphasize important information. Skins can be used to guide the user's intuition about the nature of the information, for example a warning skin may indicate that something is wrong or pending, whereas a success skin may indicate something being complete or good.
Basic Usage
<triton-badge>
A badge
</triton-badge>
<TritonBadge>
A badge
</TritonBadge>
<html>
<head>
<script type="module">
import { defineCustomElements } from '~node_modules/@kognifai/triton-cl-core/loader/index.es2017.js';
defineCustomElements();
</script>
</head>
<body>
<triton-badge>
A badge
</triton-badge>
</body>
</html>
Appearance
Skin
The skin property determines how the component looks.
<triton-badge skin="primare">Primary skin</triton-badge>
<triton-badge skin="secondary">Secondary skin</triton-badge>
...
Size
The following sizes are part of the Triton Design System.
<triton-badge size="small">small badge</triton-badge>
<triton-badge size="base">base badge</triton-badge>
Settings
A Triton Badge has a slot to which any markup can be passed. The main use of this slot is for textual content. There are also a couple of different props which can be used to customize the content of the badge.
Close Button
Setting close-button adds a clickable [x] button on the badge. Clicking the [x] will only emit an event, which can be used to close the badge.
<triton-badge close-button>Closable badge</triton-badge>
Counter
The counter property can be set to a number to make the Badge display that number to the right of its text.
<triton-badge counter="2">Badge with count</triton-badge>
Playground
API
Properties
| Property | Description | Type | Default |
|---|---|---|---|
close-button | Show exit by | boolean | false |
counter | A number on the right side of the badge | number | - |
size | Set the size of the component | SizeType.BASE SizeType.SMALL | SizeType.BASE |
skin | Set the skin of the component from preset optionsThe skin determines how the component looks | alarm critical flat information neutral primary success warning | 'primary' |
Events
| Name | Type | Description | Extra |
|---|---|---|---|
| atClose | CustomEvent<void> | Emitted when exit button has been clicked | - |
Slots
Main
takes any kind of markup element
<triton-badge>
<div></div>
</triton-badge>