PageHeader

The desktop page title row: heading, subtitle, and an optional CTA button on the right.

<script setup lang="ts">
import RyderPageHeader from "@opeolluwa/ryder/components/feedback/PageHeader.vue"
</script>

<template>
  <RyderPageHeader
    title="Complaints"
    subtitle="Everything your customers reported."
    cta-text="New complaint"
    @cta="openCreate"
  />
</template>

Examples

<script setup lang="ts">
import { ref } from "vue";
import PageHeader from "../../../src/components/feedback/PageHeader.vue";

const ctaCount = ref(0);
</script>

<template>
  <div class="space-y-3">
    <PageHeader
      title="Complaints"
      subtitle="Everything your customers reported, newest first."
      cta-text="New complaint"
      @cta="ctaCount += 1"
    />

    <p class="text-xs text-gray-400 dark:text-white/30">
      The header is desktop-only — it is invisible below 1024px.
      <code class="font-mono">cta</code> emitted {{ ctaCount }} time(s).
    </p>
  </div>
</template>

Props

Prop	Type	Default	Description
title	string	""	Heading text (<h2>).
subtitle	string	""	Subtext under the heading.
ctaText	string	""	CTA button label; the button only renders when this is non-empty.

Emits

Event	Payload	When
cta	—	The CTA button was tapped.

Slots

None.

Notes

• The root is hidden ... lg:flex: the whole header is invisible below 1024px, so mobile pages need their own heading (this component is desktop chrome, not a responsive heading).
• Single root, so extra classes fall through onto the wrapper.