ButtonLink

ButtonLink renders button behavior with legacy link styling.

Code

import { ButtonLink } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <ButtonLink title="View order details" onClick={() => {}}>
      View order
    </ButtonLink>
  );
}

With Icon

Code

import { ButtonLink, Icon } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <ButtonLink title="View order details" onClick={() => {}}>
      <Icon name="tank" size="24" />
    </ButtonLink>
  );
}

With Typography

Code

import { ButtonLink, Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <ButtonLink title="View order details" onClick={() => {}}>
      <Typography>View order</Typography>
    </ButtonLink>
  );
}

With Typography And Icon

Code

import {
  ButtonLink,
  FlexWrapper,
  Icon,
  Typography,
} from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <ButtonLink title="Back to orders" onClick={() => {}}>
      <FlexWrapper align="center" gap={8}>
        <Icon name="arrow-back" size="24" />
        <Typography variant="h5">Back to orders</Typography>
      </FlexWrapper>
    </ButtonLink>
  );
}

API

ButtonLink

Props

children

children: React.ReactNode

className

className?: string

disabled

disabled?: boolean

onClick

onClick: React.MouseEventHandler<Element>

title

title?: string

type

type?: "button" | "submit" | "reset"