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 '@almacareer/seduo-design-system';

Examples

examples

<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

examples

<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
`isSymmetrical`	`bool`	`false`	no	If true, ButtonLink is square, usually only with an Icon
`isCircle`	`bool`	`false`	no	If true, ButtonLink is circle, 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