Use the KPanel component to group content logically, providing a clear visual structure with headers and distinct boundaries.
Content Framing & Grouping
Panel with Title Prop
This panel uses the "title" prop for its header.
Panel with Header Slot
This panel uses the #header slot for customized header content.
Flex Content Panel
This panel uses "flexContent" so its body behaves like a flex container. The elements inside will flow according to your styles.
Panel with Footer
Panels also support a dedicated footer area.
TypeScript
// Using Title Prop
KPanel(title="General Information")
| Panel content here
// Using Header Slot (overrides title prop)
KPanel
template(#header)
| Advanced Options
KButton.ml-10(type="primary" size="small") View Log
| Panel content here
// Using Footer Slot
KPanel(title="Configuration")
| Main content of the panel
template(#footer)
KButton(type="default" size="small") Cancel
KButton.ml-auto(type="primary" size="small") Save
Semantic Variants
Primary Panel
This panel uses the "primary" type variant.
Success Panel
This panel uses the "success" type variant.
Warning Panel
This panel uses the "warning" type variant.
Danger Panel
This panel uses the "danger" type variant.
Info Panel
This panel uses the "info" type variant.
TypeScript
// Semantic Variants with Title
KPanel(title="Update Available" type="info")
| A new software version is ready for installation.
// Semantic Variants with Header & Footer Slots
KPanel(type="danger")
template(#header)
| System Error
KButton.ml-auto(type="danger" size="small") Report issue
| The database connection has been lost.
template(#footer)
KButton(type="default" size="small") Ignore
KButton.ml-10(type="danger" size="small") Reconnect
Attributes
Configure the KPanel component using these attributes.
Name
Type
Default
Description
title
string
''
Optional panel title. Can also be provided via #header slot
noGap
boolean
true
Removes default spacing around content
flexContent
boolean
false
Applies basic flexbox layout to the inner content wrapper