<script setup lang="ts">
import Link from '~/components/ui/Link.vue'
import Button from '~/components/ui/Button.vue'
</script>

# Link

Will render an `<a href...>` element.

This component only adds some styles to a `<RouterLink>`.

```vue-html

<Link to="/">
  Home
</Link>

```

<Link to="/">
  Home
</Link>

Instead of a route, you can set the prop `to` to any web address starting with `http`.

## Colors and Variants

###### Solid:

<Link primary solid to="/">
  Home
</Link>

<Link secondary solid to="/">
  Home
</Link>

<Link destructive solid to="/">
  Home
</Link>

###### Outline:

<Link primary outline to="/">
  Home
</Link>

<Link secondary outline to="/">
  Home
</Link>

<Link destructive outline to="/">
  Home
</Link>

###### Ghost:

<Link primary ghost to="/">
  Home
</Link>

<Link secondary ghost to="/">
  Home
</Link>

<Link destructive ghost to="/">
  Home
</Link>

<Button>
  I'm a button
</Button>

## Shapes

<Link primary solid round to="/">
  Home
</Link>
