Link
Link allows users to follow navigation.
Examples
import { Link } from "@seduo/design-system";
...
<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 |
isUnderlined |
bool |
false | no | Whether is the link underlined |
isDisabled |
bool |
false | no | Whether is the link disabled |
ref |
ForwardedRef<HTMLAnchorElement> |
- | no | Tag element reference |
elementType |
React.Element |
a |
no | HTML tag |
UNSAFE_className |
string |
- | no | Wrapper custom class name |
UNSAFE_style |
CSSProperties |
- | no | Wrapper custom style |
On this page