LinkButton

This component extends the regular link and use it if you want to make a button that looks like a link

Examples

<LinkButton onClick={() => {}} color="primary">
  Primary Link
</LinkButton>
<LinkButton onClick={() => {}} color="secondary">
  Secondary Link
</LinkButton>
<LinkButton onClick={() => {}} color="tertiary">
  Tertiary Link
</LinkButton>

{% embed "@seduo-design-system/linkButton.twig" with { props: {
    color: 'primary',
    onClick: 'alert(\'clicked!\');'
}} %}
    {% block content %}
        Primary Link
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/linkButton.twig" with { props: {
    color: 'secondary',
    onClick: 'alert(\'clicked2!\');'
}} %}
    {% block content %}
        Secondary Link
    {% endblock %}
{% endembed %}

{% embed "@seduo-design-system/linkButton.twig" with { props: {
    color: 'tertiary',
    onClick: 'alert(\'clicked3!\');'
}} %}
    {% block content %}
        Tertiary Link
    {% endblock %}
{% endembed %}

<LinkButton onClick="alert('clicked!');" color="primary">Primary Link</LinkButton>
<LinkButton onClick="alert('clicked2!');" color="secondary">Secondary Link</LinkButton>
<LinkButton onClick="alert('clicked3!');" color="tertiary">Tertiary Link</LinkButton>

Available props

Prop name	Type	Default	Required	Description
`color`	Action link colors	`primary`	no	Color of the link
`hasVisitedStyleAllowed`	`bool`	`false`	no	Allow link to have visited style
`underlined`	`hover` \| `always` \| `never`	`hover`	no	Whether is the link underlined
`isDisabled`	`bool`	`false`	no	Whether is the link disabled
`onClick`	`React.MouseEventHandler`, `string`	`null`	no	JS function to call on click
`ref`	`ForwardedRef<HTMLButtonElement>`	-	no	Button element reference
`elementType`	`React.Element`	`button`	no	HTML tag
`UNSAFE_className`	`string`	-	no	Wrapper custom class name
`UNSAFE_style`	`CSSProperties`	-	no	Wrapper custom style

On this page