Link

Styled anchor components for navigation and external links.

Basic Usage

Learn more
dart
1
2
3
4
DLink(
  label: 'Learn more',
  href: '/about',
)

External Link

External links automatically open in a new tab with proper security attributes.

View on GitHub↗
dart
1
2
3
4
5
DLink(
  label: 'View on GitHub',
  href: 'https://github.com/example/repo',
  external: true,
)

Colors

Primary Neutral Inherit
dart
1
2
3
DLink(color: DLinkColor.primary, label: 'Primary', href: '#')
DLink(color: DLinkColor.neutral, label: 'Neutral', href: '#')
DLink(color: DLinkColor.inherit, label: 'Inherit', href: '#')

With Underline

Hover underline Always underlined
dart
1
2
3
4
5
// Underline on hover (default)
DLink(label: 'Hover underline', href: '#')

// Always underlined
DLink(label: 'Always underlined', href: '#', underline: true)

States

Active Link Disabled Link
dart
1
2
DLink(label: 'Active Link', href: '#', active: true)
DLink(label: 'Disabled Link', href: '#', disabled: true)

With Icons

Documentation Download
dart
1
2
3
4
5
6
7
8
9
10
11
DLink(
  label: 'Documentation',
  href: '/docs',
  icon: DIcon(name: DIconNames.book, size: DIconSize.sm),
)

DLink(
  label: 'Download',
  href: '/download',
  trailingIcon: DIcon(name: DIconNames.download, size: DIconSize.sm),
)

Navigation Link

A navigation-specific link with padding and hover background.

Dashboard Settings Profile
dart
1
2
3
4
5
6
7
DNavLink(label: 'Dashboard', href: '/dashboard', active: true)
DNavLink(label: 'Settings', href: '/settings')
DNavLink(
  label: 'Profile',
  href: '/profile',
  icon: DIcon(name: DIconNames.user, size: DIconSize.sm),
)

Social Link

Styled for social media icons.

dart
1
2
3
4
5
6
7
8
9
10
11
DSocialLink(
  href: 'https://twitter.com/example',
  icon: DIcon(name: DIconNames.twitter),
  ariaLabel: 'Follow us on Twitter',
)

DSocialLink(
  href: 'https://github.com/example',
  icon: DIcon(name: DIconNames.github),
  ariaLabel: 'View our GitHub',
)

API Reference

DLink

Prop Type Default Description
label String? null Link text
href String required Link URL
external bool false Open in new tab
active bool false Active state
disabled bool false Disabled state
color DLinkColor primary Color variant
underline bool false Always show underline
icon Component? null Leading icon
trailingIcon Component? null Trailing icon
children List<Component> [] Custom content

DNavLink

Prop Type Default Description
label String required Link text
href String required Link URL
active bool false Active state
exact bool false Exact path match
icon Component? null Leading icon

DSocialLink

Prop Type Default Description
href String required Link URL
icon Component required Icon component
label String? null Screen reader label
ariaLabel String? null Aria label