Link

The Link component looks the same as the Button component and the only difference is that the underlying HTML is an anchor tag.

The basic Link comes in three main variants, each of them with a specific intent in mind. It also support a "disabled" variant, for cases where the button is not actionable.

  • Positive: actions that are going to create something or strongly agree
  • Primary: actions that are less central to the user experience
  • Negative: actions that are going to delete data or remove something
  • Dark: primary actions in a dark theme
  • Light: primary actions in a light theme
  • Disabled: actions that are not available
Positive
Primary
Negative
Disabled
Dark
Light
<Row gap="large" align="center" padding="large" justify="center">
  <Link label="Positive" color="positive" href="/" />
  <Link label="Primary" color="primary" href="/" />
  <Link label="Negative" color="negative" href="/" />
  <Link label="Disabled" color="positive" disabled href="/" />
  <Link label="Dark" color="dark" href="/" />
  <Link label="Light" color="light" href="/" />
</Row>

The bare Link variants fulfill the same function than the basic counterparts but have a lighter style that can be more easily integrated in complex components.

Positive
Primary
Negative
Disabled
Dark
Light
<Row gap="large" align="center" padding="large" justify="center">
  <Link bare label="Positive" color="positive" href="/" />
  <Link bare label="Primary" color="primary" href="/" />
  <Link bare label="Negative" color="negative" href="/" />
  <Link bare label="Disabled" color="positive" disabled href="/" />
</Row>

Border

The Link can have a border which will match the current text color

Positive
Primary
Negative
Disabled
Dark
Light
<Row gap="large" align="center" padding="large" justify="center">
  <Link border bare label="Positive" color="positive" href="/" />
  <Link border bare label="Primary" color="primary" href="/" />
  <Link border bare label="Negative" color="negative" href="/" />
  <Link border bare label="Disabled" color="positive" disabled href="/" />
  <Link border bare label="Dark" color="dark" href="/" />
  <Link border bare label="Light" color="light" href="/" />
</Row>