View on Git
ButtonLink
This component extends the regular button and use it if you want to make a link that looks like a button
in react implementation you need to include this line on the top of script
import { ButtonLink } from '@seduo/design-system';
Examples
import { ButtonLink } from '@seduo/design-system';
...
<ButtonLink href="#" color="primary">
Primary ButtonLink
</ButtonLink>
<ButtonLink href="#" color="primary" isDisabled>
Primary ButtonLink disabled
</ButtonLink>
<ButtonLink href="#" color="primary">Primary ButtonLink</ButtonLink>
<ButtonLink href="#" color="primary" isDisabled>Primary ButtonLink disabled</ButtonLink>
Button link block
import { ButtonLink, ButtonIcon } from '@seduo/design-system';
...
<ButtonLink href="#" color="primary" size="large" isBlock>
<ButtonIcon name="play-filled" />ButtonLink block large
</ButtonLink>
...
<ButtonLink href="#" color="primary" isBlock>
ButtonLink block <ButtonIcon name="play-filled" />
</ButtonLink>
...
<ButtonLink href="#" color="primary" size="small" isDisabled isBlock>
ButtonLink block small disabled
</ButtonLink>
<ButtonLink href="#" color="primary" size="large" isBlock>
<ButtonIcon name="play-filled" />ButtonLink block large
</ButtonLink>
...
<ButtonLink href="#" color="primary" isBlock>
ButtonLink block <ButtonIcon name="play-filled" />
</ButtonLink>
...
<ButtonLink href="#" color="primary" size="small" isDisabled isBlock>
ButtonLink block small disabled
</ButtonLink>
API
Prop name | Type | Default | Required | Description |
---|---|---|---|---|
children |
ReactNode |
null |
no | Content of the ButtonLink |
color |
Action Color dictionary, Emotion Color dictionary | primary |
no | Color variant |
elementType |
ElementType |
'a' |
no | Type of element |
href |
string |
- | yes | Link URL |
isBlock |
bool |
false |
no | Span the element to the full width of its parent |
isDisabled |
bool |
false |
no | If true, ButtonLink is disabled |
isLoading |
bool |
false |
no | If true, ButtonLink is in a loading state, disabled and the Spinner is visible |
isSquare |
bool |
false |
no | If true, ButtonLink is square, usually only with an Icon |
onClick |
React.MouseEventHandler , string |
null |
no | JS function to call on click |
ref |
ForwardedRef<HTMLAnchorElement> |
- | no | Anchor element reference |
size |
Size dictionary | medium |
no | Size variant |
target |
string |
null |
no | Link target |
For more information see Button
component. ButtonLink also contain all the appropriate
attributes according to the type of element. The default element type for ButtonLink is <a>
.
On this page