Button

Source

A button.

npx @sv/components button

Default

---

---

Show Code

/* @jsxImportSource vue */
import { Icon } from "@components/src/vue/Icon";
import { Button } from "@components/src/vue/Button";

export default function () {
  return (
    <div class="flex gap-10">
      <Button>Button</Button>
      <Button disabled>Disabled</Button>
      <Button>
        <span>with icon</span>
        <Icon name="check" />
      </Button>
    </div>
  );
}

Outline

---

---

Show Code

/* @jsxImportSource vue */
import { Icon } from "@components/src/vue/Icon";
import { Button } from "@components/src/vue/Button";

export default function () {
  return (
    <div class="flex gap-10">
      <Button variant="outline">Button</Button>
      <Button variant="outline" disabled>
        Disabled
      </Button>
      <Button variant="outline">
        <span>with icon</span>
        <Icon name="check" />
      </Button>
    </div>
  );
}

Ghost

---

---

Show Code

/* @jsxImportSource vue */
import { Icon } from "@components/src/vue/Icon";
import { Button } from "@components/src/vue/Button";

export default function () {
  return (
    <div class="flex gap-10">
      <Button variant="ghost">Button</Button>
      <Button variant="ghost" disabled>
        Disabled
      </Button>
      <Button variant="ghost">
        <span>with icon</span>
        <Icon name="check" />
      </Button>
    </div>
  );
}

Links

Links are not buttons and buttons are not links. Links have hrefs and buttons do not, so having props that apply only in a certain variation is confusing.

But sometimes you need a link that looks like a button. So we have a separate Link component with a button variant. You can replace the a tag inside this component with a framework specific router link.

Example

---

---

Show Code

/* @jsxImportSource vue */
import { Link } from "@components/src/vue/Button";

export default function () {
  return (
    <div class="flex gap-10 text-white">
      <Link variant="default" href="https://google.com" target="_blank">
        To somewhere
      </Link>
      <Link variant="outline" href="https://bing.com" target="_blank">
        To somewhere else
      </Link>
    </div>
  );
}