OudsLink class

OUDS Link design guidelines

Reference design version : 2.4.0

Link is a UI element that allows to navigate from one location to another, either within the same page or across different pages in the same resource, or to an external resource. Link's primary function is navigation and it communicates its interactive nature visually and semantically.

parameters :

• size : The size of the link, OudsLinkSize such as small or default, to fit various visual needs.
• density : The density of the link, OudsLinkDensity such as compact or default.
• label : A text to display in link component.
• icon : An optional SVG asset name to display an icon within the link (used with OudsLink.icon).
• tinted : tinted Controls whether the icon should be tinted with the theme color. Defaults to true. When set to false, the icon is displayed with its original colors (e.g., for multi-color icons). Note that untinted icons must ensure sufficient contrast with the background for accessibility reasons, only used with OudsLink.icon.
• onPressed: Callback invoked when the link is clicked.

OudsLink provides a dedicated named constructor for every supported variant:

• The default (unnamed) constructor renders a text-only link.
• OudsLink.icon renders a label with a custom icon.
• OudsLink.previous renders a "backward" navigation link with a leading chevron.
• OudsLink.next renders a "forward" navigation link with a trailing chevron.
• OudsLink.external renders a link navigating outside the current context, with a trailing indicator.

You can use OudsLink component in your project, customizing parameters as needed :

Small Text only :

This is the default layout of the component.

OudsLink(
      label: 'Label',
      size: OudsLinkSize.small,
      onPressed: () {}
    );

Link with Icon :

Creates an OudsLink displaying its label alongside a custom icon.

OudsLink.icon(
      label: 'Label',
      icon: 'assets/ic_heart.svg',
      tinted: true,
      onPressed: () {}
    );

Next :

Creates an OudsLink used for standard navigation, displaying a trailing chevron after the label.

OudsLink.next(
      label: 'Label',
      onPressed: () {}
    );

Previous :

Creates an OudsLink used for "backward" navigation, displaying a leading chevron before the label.

OudsLink.previous(
      label: 'Label',
      onPressed: () {}
    );

External :

Creates an OudsLink used to navigate outside the current product, service or application. The external navigation indicator informs users that the destination belongs to another context.

OudsLink.external(
      label: 'Label',
      onPressed: () {}
    );

Compact density link :

Reduces the link's minimum height and block padding, useful in dense layouts.

OudsLink(
      label: 'Label',
      density: OudsLinkDensity.compact,
      onPressed: () {}
    );