Kanban column
A single column inside a FluxKanban board. Each column has a unique column-id that is referenced by its child items and included in the move event when an item is dropped on it. The header can be replaced via the header slot or extended with the actions slot for things like a quick-add button. Use the empty slot for an empty-state message and the footer slot for inline actions like adding a new item.
Props
column-id: string | number
Unique identifier for this column. Included in move events.
disabled?: boolean
Disables drag-and-drop for this column. Items inside cannot be picked up and the column refuses incoming drops.
Default: false
label: string
Header label displayed at the top of the column.
Slots
default
Item content — place FluxKanbanItem components here.
header
Replaces the default label with a custom header.
actions
Extra content rendered at the end of the column header (e.g. an add button).
empty
Shown inside the column body when there are no items.
footer
Rendered below the item list, useful for an inline "Add item" action.
Examples
Basic
A column with a label and a couple of items.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="3"
column-id="todo">
<div class="card">
Update documentation
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Actions
Adding an action button to the column header via the `actions` slot.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<template #actions>
<FluxSecondaryButton
icon-leading="plus"
size="small"/>
</template>
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn, FluxSecondaryButton } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Custom header
Replacing the default label with a fully custom header.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<template #header>
<div class="custom-header">
<FluxBadge
color="primary"
label="3"
type="none"/>
<span class="custom-header-label">To do</span>
</div>
</template>
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="3"
column-id="todo">
<div class="card">
Update documentation
</div>
</FluxKanbanItem>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxBadge, FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
</script>
<style scoped>
.custom-header {
display: flex;
align-items: center;
gap: 8px;
}
.custom-header-label {
font-size: .875rem;
font-weight: 600;
color: var(--foreground);
}
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Empty state
Showing a message in the `empty` slot when no items are present.
<template>
<FluxKanban>
<FluxKanbanColumn
v-for="column in columns"
:key="column.id"
:column-id="column.id"
:label="column.label">
<FluxKanbanItem
v-for="card in getCards(column.id)"
:key="card.id"
:item-id="card.id"
:column-id="column.id">
<div class="card">
{{ card.title }}
</div>
</FluxKanbanItem>
<template #empty>
Drop a card here.
</template>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn } from '@flux-ui/components';
const columns = [
{id: 'todo', label: 'To do'},
{id: 'in-progress', label: 'In progress'},
{id: 'done', label: 'Done'}
];
const cards = [
{id: 1, columnId: 'todo', title: 'A lonely card'}
];
function getCards(columnId: string) {
return cards.filter(card => card.columnId === columnId);
}
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>Footer
An inline "Add item" button rendered through the `footer` slot.
<template>
<FluxKanban style="max-width: 100%">
<FluxKanbanColumn
column-id="todo"
label="To do">
<FluxKanbanItem
item-id="1"
column-id="todo">
<div class="card">
Design system review
</div>
</FluxKanbanItem>
<FluxKanbanItem
item-id="2"
column-id="todo">
<div class="card">
Write unit tests
</div>
</FluxKanbanItem>
<template #footer>
<FluxSecondaryButton
icon-leading="plus"
label="Add card"
size="small"/>
</template>
</FluxKanbanColumn>
</FluxKanban>
</template>
<script
lang="ts"
setup>
import { FluxKanban, FluxKanbanItem, FluxKanbanColumn, FluxSecondaryButton } from '@flux-ui/components';
</script>
<style scoped>
.card {
padding: 12px;
background: var(--gray-25);
border: 1px solid var(--gray-200);
border-radius: var(--radius);
transition: box-shadow 180ms var(--swift-out);
}
.card:hover {
box-shadow: 0 1px 4px rgb(0 0 0 / .08);
}
</style>