D
Design System
Design System/Molecules/URL Redirect Prompt

URL Redirect Prompt

Redirect recommendation callout shown when an editable URL handle changes.

When To Use

  • Use URL Redirect Prompt when information needs to be scanned quickly and compared across multiple rows, cards, or values.
  • Choose the example that best matches whether the user is browsing, monitoring, or drilling into structured data.
  • Lean on these patterns when you want consistent spacing and hierarchy before tuning the visual treatment.

When Not To Use

  • Do not use a dense data pattern when the primary task is storytelling, onboarding, or one-off explanation.
  • Do not flatten nuanced data into a compact summary card if the user still needs the underlying structure to make a decision.

Accessibility Notes

  • Preserve table semantics for tabular data and avoid flattening structured information into generic divs.
  • Use clear headings, summaries, and labels so assistive technologies can announce the data in context.
  • Do not rely on color alone to communicate trend, status, or state in charts and metric cards.

Key Props / API

Props

originalHandle, nextHandle, pathPrefix, checked, onCheckedChange, title

Key exports

UrlRedirectPrompt, hasUrlHandleChanged, normalizeUrlHandle, urlResourcePath

Example Code

import { UrlRedirectPrompt } from "@hilum/ui"

<UrlRedirectPrompt
  originalHandle="linen-shirt"
  nextHandle={handle}
  pathPrefix="products"
  checked={createRedirect}
  onCheckedChange={setCreateRedirect}
/>

Changed Handle

Redirect recommendation

Renders only when both handles are present and the public path changed.

Create URL redirect

Preserve search rankings and old links by redirecting /products/linen-shirt to /products/linen-shirt-v2.

No Change

No prompt

The component intentionally renders nothing when the URL handle is unchanged.

No redirect prompt is rendered.