Link

Link allows users to follow navigation.

Examples

<Link href="#" color="primary">
  Primary Link
</Link>
<Link href="#" color="secondary">
  Secondary Link
</Link>
<Link href="#" color="tertiary">
  Tertiary Link
</Link>

{% embed "@seduo-design-system/link.twig" with { props: {
    color: 'primary',
    href: '#'
}} %}
    {% block content %}
        Primary Link
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/link.twig" with { props: {
    color: 'secondary',
    href: '#'
}} %}
    {% block content %}
        Secondary Link
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/link.twig" with { props: {
    color: 'tertiary',
    href: '#'
}} %}
    {% block content %}
        Tertiary Link
    {% endblock %}
{% endembed %}

<Link href="#" color="primary">Primary Link</Link>
<Link href="#" color="secondary">Secondary Link</Link>
<Link href="#" color="tertiary">Tertiary Link</Link>

Available props

Prop name	Type	Default	Required	Description
`href`	`string`	-	yes	Link's href attribute
`color`	Action link colors	`primary`	no	Color of the link
`isDisabled`	`bool`	false	no	Whether is the link disabled
`ref`	`ForwardedRef<HTMLAnchorElement>`	-	no	Tag element reference
`elementType`	`React.Element`	`a`	no	HTML tag
`underlined`	`hover` \| `always` \| `never`	`hover`	No	When is the link underlined
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style

On this page