Skip to main content

DetailPageButton

DetailPageButton​

@vendure/dashboarddetail-page-button.tsx
v3.4.0

DetailPageButton is a reusable navigation component designed to provide consistent UX across list views when linking to detail pages. It renders as a ghost button with a chevron indicator, making it easy for users to identify clickable links that navigate to detail views.

Example

// Basic usage with ID (relative navigation)
<DetailPageButton id="123" label="Product Name" />

*Example*

```tsx
// Custom href with search params
<DetailPageButton
  href="/products/detail/456"
  label="Custom Product"
  search={{ tab: 'variants' }}
/>
Signature
function DetailPageButton(props: {
    label: string | React.ReactNode;
    id?: string;
    href?: string;
    disabled?: boolean;
    search?: Record<string, string>;
}): void

Parameters

props​

parameter
{ label: string | React.ReactNode; id?: string; href?: string; disabled?: boolean; search?: Record<string, string>; }