ButtonLink

A button component that can be used as a link.

API reference

Prop	Type	Default	Responsive
variant	primarysecondary	primary	Yes
size	smallmedium	medium	Yes
iconStart	ReactNode	-	No
iconEnd	ReactNode	-	No
isDisabled	boolean	false	No
href	string	-	No
hrefLang	string	-	No
target	HTMLAttributeAnchorTarget	_self	No
rel	string	-	No
children	ReactNode	-	No
className	string	-	No
style	CSSProperties	-	No

Examples

Variants

Here's a view when buttons have different variants.

Button Button

<Flex align="center">
  <ButtonLink iconStart={<Icon name="cloud" />} variant="primary">
    Button
  </ButtonLink>
  <ButtonLink iconStart={<Icon name="cloud" />} variant="secondary">
    Button
  </ButtonLink>
</Flex>

Sizes

Here's a view when buttons have different sizes.

SmallMedium

<Flex align="center">
  <ButtonLink size="small">Small</ButtonLink>
  <ButtonLink size="medium">Medium</ButtonLink>
</Flex>

With Icons

Here's a view when buttons have icons.

ButtonButtonButton

<Flex align="center">
  <ButtonLink iconStart={<Icon name="cloud" />}>Button</ButtonLink>
  <ButtonLink iconEnd={<Icon name="chevronRight" />}>Button</ButtonLink>
  <ButtonLink
    iconStart={<Icon name="cloud" />}
    iconEnd={<Icon name="chevronRight" />}>
    Button
  </ButtonLink>
</Flex>

Disabled

Here's a view when buttons are disabled.

PrimarySecondary

<Flex gap="4">
  <ButtonLink variant="primary" isDisabled>
    Primary
  </ButtonLink>
  <ButtonLink variant="secondary" isDisabled>
    Secondary
  </ButtonLink>
</Flex>

Responsive

Here's a view when buttons are responsive.

<ButtonLink variant={{ initial: 'primary', lg: 'secondary' }}>
  Responsive Button
</ButtonLink>