ExternalButton

Button that opens an external resource in a new tab, with an external-link icon.

Usage

svelte

<script lang="ts">
  import { ExternalButton } from "@milandekruijf/ui/svelte";
</script>

<ExternalButton href="https://github.com/milandekruijf/portfolio">
  View source
</ExternalButton>

Examples

Variants

View on npm View source

<script lang="ts">
  import { ExternalButton } from "@milandekruijf/ui/svelte";
  import { row } from "./styles.js";
</script>

<div class={row}>
  <ExternalButton href="https://www.npmjs.com/package/@milandekruijf/ui">
    View on npm
  </ExternalButton>
  <ExternalButton
    color="blue"
    href="https://github.com/milandekruijf/portfolio"
  >
    View source
  </ExternalButton>
</div>

Props

Prop	Type	Default	Description
href	`string`	—	External destination; always opened in a new tab.
color?	`"slate" \| "ghost" \| "blue"`	"slate"	Same variants as `Button`.
size?	`"sm" \| "md"`	"md"	Same sizes as `Button`.
target?	`string`	"_blank"	Forwarded to the anchor.
rel?	`string`	"noopener noreferrer"	Forwarded to the anchor.
class?	`string`	—	Extra classes merged after the recipe classes.
children	`Snippet`	—	Label text; the external-link icon is appended automatically.

Also accepts every `Button` prop (`type`, `download`, `disabled`, `onclick`, …).