Badge
Badges display status or counts
x-t-badge
Preview and Examples
default badge
brand badge
primary badge
secondary badge
success badge
warning badge
danger badge
<x-turbine-ui-badge>default badge</x-turbine-ui-badge><x-turbine-ui-badge variant="brand">brand badge</x-turbine-ui-badge><x-turbine-ui-badge variant="primary">primary badge</x-turbine-ui-badge><x-turbine-ui-badge variant="secondary">secondary badge</x-turbine-ui-badge><x-turbine-ui-badge variant="success">success badge</x-turbine-ui-badge><x-turbine-ui-badge variant="warning">warning badge</x-turbine-ui-badge><x-turbine-ui-badge variant="danger">danger badge</x-turbine-ui-badge>
Attributes
| Name | Type | Options | Description |
|---|---|---|---|
| accent | boolean |
true
false
|
Adds an accent |
| border | boolean |
true
false
|
Adds a border |
| hollow | boolean |
true
false
|
Removes background colour |
| icon | string |
string
|
Adds an icon |
| prefix | string |
string
|
Adds content to the start |
| ring | boolean |
true
false
|
Adds a ring |
| rounded | boolean |
true
false
|
Adds rounded corners |
| shadow | boolean |
true
false
|
Adds a shadow |
| size | string |
xs
sm
md
lg
xl
2xl
|
Controls component scale |
| suffix | string |
string
|
Adds content to the end |
| variant | string |
default
brand
primary
secondary
success
warning
danger
light
dark
|
A variant is like a colour palette |