Box
<k-box>
The <k-box> component is a multi-purpose box with text. You can use it as a foundation for empty state displays or anything else that needs to be displayed in a box. It comes with several pre-defined styles …
<k-box text="This is a nice box" theme="positive" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| html |
boolean |
false |
If set to
true, the text is rendered as HTML code, otherwise as plain text |
| text |
string |
– |
Text to display inside the box
|
| theme |
string none, code, button, positive, negative, notice, info, empty |
"none" |
Choose one of the pre-defined styles
|
Slots
| Slot | Description |
|---|---|
| default | Use instead of text prop |
Events
The box listens to any typical HTML event.
<k-box text="This is a box" @click="clicked" />Content
Via text prop
<k-box text="This is a nice box" />Custom content
The box can be filled with your own elements to overwrite the default text implementation:
<k-box>
<!-- custom html goes here -->
</k-box>CSS classes
.k-box