ArcaneSpan#

An inline text component for styling portions of text within a larger block.

Basic Usage#

ArcaneSpan(text: 'highlighted text')

Properties#

Examples#

Inline Styling#

ArcaneDiv(
  children: [
    ArcaneText('This is '),
    ArcaneSpan(
      text: 'important',
      styles: const ArcaneStyleData(
        fontWeight: FontWeight.bold,
        textColor: TextColor.primary,
      ),
    ),
    ArcaneText(' information.'),
  ],
)

Highlighted Text#

ArcaneDiv(
  children: [
    ArcaneText('Use the '),
    ArcaneSpan(
      text: 'ArcaneButton',
      styles: const ArcaneStyleData(
        fontFamily: FontFamily.mono,
        background: Background.surface,
        padding: PaddingPreset.xs,
        borderRadius: Radius.sm,
      ),
    ),
    ArcaneText(' component for actions.'),
  ],
)

Color Variations#

ArcaneRow(
  gap: Gap.sm,
  children: [
    ArcaneSpan(
      text: 'Success',
      styles: const ArcaneStyleData(textColor: TextColor.success),
    ),
    ArcaneSpan(
      text: 'Warning',
      styles: const ArcaneStyleData(textColor: TextColor.warning),
    ),
    ArcaneSpan(
      text: 'Error',
      styles: const ArcaneStyleData(textColor: TextColor.destructive),
    ),
  ],
)

Status Text#

ArcaneDiv(
  children: [
    ArcaneText('Status: '),
    ArcaneSpan(
      text: isOnline ? 'Online' : 'Offline',
      styles: ArcaneStyleData(
        textColor: isOnline ? TextColor.success : TextColor.muted,
        fontWeight: FontWeight.medium,
      ),
    ),
  ],
)

Price with Currency#

ArcaneRow(
  crossAxisAlignment: AlignItems.baseline,
  children: [
    ArcaneSpan(
      text: '\$',
      styles: const ArcaneStyleData(
        fontSize: FontSize.lg,
        textColor: TextColor.muted,
      ),
    ),
    ArcaneSpan(
      text: '99',
      styles: const ArcaneStyleData(
        fontSize: FontSize.xl3,
        fontWeight: FontWeight.bold,
      ),
    ),
    ArcaneSpan(
      text: '.99',
      styles: const ArcaneStyleData(
        fontSize: FontSize.lg,
        textColor: TextColor.muted,
      ),
    ),
    ArcaneSpan(
      text: '/mo',
      styles: const ArcaneStyleData(
        fontSize: FontSize.sm,
        textColor: TextColor.muted,
      ),
    ),
  ],
)

Keyboard Shortcuts#

ArcaneDiv(
  children: [
    ArcaneText('Press '),
    ArcaneSpan(
      text: '⌘',
      styles: const ArcaneStyleData(
        fontFamily: FontFamily.mono,
        background: Background.surface,
        padding: PaddingPreset.xs,
        borderRadius: Radius.sm,
        border: Border.subtle,
      ),
    ),
    ArcaneText(' + '),
    ArcaneSpan(
      text: 'K',
      styles: const ArcaneStyleData(
        fontFamily: FontFamily.mono,
        background: Background.surface,
        padding: PaddingPreset.xs,
        borderRadius: Radius.sm,
        border: Border.subtle,
      ),
    ),
    ArcaneText(' to search'),
  ],
)

Link-like Span#

ArcaneDiv(
  children: [
    ArcaneText('Read our '),
    ArcaneSpan(
      text: 'documentation',
      styles: const ArcaneStyleData(
        textColor: TextColor.primary,
        textDecoration: TextDecoration.underline,
        cursor: Cursor.pointer,
      ),
    ),
    ArcaneText(' to learn more.'),
  ],
)

Badge-like Span#

ArcaneDiv(
  children: [
    ArcaneText('Version '),
    ArcaneSpan(
      text: '2.0.0',
      styles: const ArcaneStyleData(
        background: Background.accent,
        textColor: TextColor.onPrimary,
        padding: PaddingPreset.xs,
        borderRadius: Radius.sm,
        fontSize: FontSize.xs,
        fontWeight: FontWeight.medium,
      ),
    ),
    ArcaneText(' released!'),
  ],
)

Related Components#

• ArcaneText - Basic text display
• ArcaneInlineCode - Inline code formatting
• ArcaneRichText - Rich text composition