Dashboard header

The dashboard header component appears at the top of the dashboard content area. It displays the page title along with an optional icon, providing a clear visual identifier for the current section. The header helps maintain consistency across dashboard views and gives users immediate context about where they are within the interface.

Props

icon?: FluxIconName
The icon of the dashboard header.

title?: string
The title of the dashboard header.

Slots

start
The content before the dashboard header.

end
The content after the dashboard header.

Snippet

DashboardHeader.vue

<template>
    <FluxDashboardHeader
        title="Dashboard title">
        <template #start>
            <!-- Optional content in the start. -->
        </template>

        <template #end>
            <!-- Optional content in the end. -->
        </template>
    </FluxDashboardHeader>
</template>

<script
    setup
    lang="ts">
    import { FluxDashboardHeader } from '@flux-ui/dashboard';
</script>

Used components

• Icon
• Layout
  • Spacer