ArcaneJaspr Codex
Documentation
🔍
ArcaneArrowLink
Inline text link with arrow icon

ArcaneArrowLink#

A simple inline text link with an arrow icon. Perfect for card footers, "Learn more" links, and inline CTAs.

Basic Usage#

const ArcaneArrowLink(label: 'Learn more')

Properties#

PropertyTypeDefaultDescription
labelStringrequiredLink text
href String? null Navigation URL
onTap VoidCallback? null Click handler
size ArrowLinkSize sm Text size
showArrow bool true Show arrow icon
arrowBefore bool false Arrow before text (back link)
accent bool true Use accent color

Sizes#

const ArcaneArrowLink(label: 'Extra small', size: ArrowLinkSize.xs)
const ArcaneArrowLink(label: 'Small', size: ArrowLinkSize.sm)       // default
const ArcaneArrowLink(label: 'Medium', size: ArrowLinkSize.md)
const ArcaneArrowLink(label: 'Large', size: ArrowLinkSize.lg)

Variants#

Accent (Default)#

const ArcaneArrowLink(label: 'View details')
// or explicitly:
const ArcaneArrowLink.accent(label: 'View details')

Muted#

const ArcaneArrowLink.muted(label: 'Skip for now')

With Navigation#

const ArcaneArrowLink(
  label: 'Read the docs',
  href: '/docs',
)

With Click Handler#

ArcaneArrowLink(
  label: 'Show details',
  onTap: () => showDetails(),
)

const ArcaneArrowLink(
  label: 'Go back',
  arrowBefore: true,
)

Without Arrow#

const ArcaneArrowLink(
  label: 'Simple link',
  showArrow: false,
)

ArcaneFlexiCardItem(
  icon: ArcaneIcon.server(size: IconSize.xl),
  shortText: 'Enterprise Hardware',
  longText: 'High-performance processors and NVMe storage.',
  footer: const ArcaneArrowLink(label: 'View specs'),
)

In Feature Showcase#

ArcaneFeatureShowcaseItem(
  icon: ArcaneIcon.shield(size: IconSize.xl),
  title: 'DDoS Protection',
  description: 'Enterprise-grade protection included.',
  footer: const ArcaneArrowLink(label: 'Learn more'),
)

ArcaneRow(
  gap: Gap.lg,
  children: [
    const ArcaneArrowLink(
      label: 'Previous',
      arrowBefore: true,
      href: '/page/1',
    ),
    const ArcaneArrowLink(
      label: 'Next',
      href: '/page/3',
    ),
  ],
)