Phi / Button

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <div class="flex flex-wrap items-center gap-2">
    <Button variant="secondary">Button</Button>
    <Button variant="secondary" shape="square" :icon="PhPlus" aria-label="Add" />
  </div>
</template>

Installation

Barrel

import { Button } from "@dicehub/phi";

Granular

import { Button } from "@dicehub/phi/components/button";

Usage

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="secondary">Click me</Button>
</template>

Examples

Variants

Primary

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="primary">Primary</Button>
</template>

Secondary

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="secondary">Secondary</Button>
</template>

Ghost

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="ghost">Ghost</Button>
</template>

Destructive

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="destructive">Destructive</Button>
</template>

Outline

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="outline">Outline</Button>
</template>

Secondary Destructive

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="secondary-destructive">Secondary Destructive</Button>
</template>

Sizes

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button size="xs" variant="secondary">Extra Small</Button>
    <Button size="sm" variant="secondary">Small</Button>
    <Button size="base" variant="secondary">Base</Button>
    <Button size="lg" variant="secondary">Large</Button>
  </div>
</template>

With Icon

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="secondary" :icon="PhPlus">Create Worker</Button>
</template>

Icon Only

For icon-only buttons, use shape="square" or shape="circle" with the icon prop. Provide an accessible name with aria-label,aria-labelledby, or a string or numeric title.

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button variant="secondary" shape="square" :icon="PhPlus" aria-label="Add item" />
    <Button variant="secondary" shape="circle" :icon="PhPlus" aria-label="Add item" />
  </div>
</template>

Loading State

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="primary" loading>Loading...</Button>
</template>

Disabled State

<script setup>
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <Button variant="secondary" disabled>Disabled</Button>
</template>

Use the title prop to show a tooltip for icon-only, disabled, or loading buttons, or whenever extra context helps explain the action. For a Button without text, the title also becomes its accessible label unless aria-label oraria-labelledby is present.

<script setup>
import { PhPlus } from "@phosphor-icons/vue";
import { Button } from "@dicehub/phi/components/button";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <Button variant="secondary" title="Create a new Worker">Create Worker</Button>
    <Button
      variant="secondary"
      shape="square"
      :icon="PhPlus"
      title="Add item"
    />
    <Button
      variant="secondary"
      shape="square"
      :icon="PhPlus"
      aria-label="Create item"
      title="Add item"
    />
    <Button
      variant="secondary"
      title="You need edit access to create a Worker"
      disabled
    >
      Restricted action
    </Button>
    <Button variant="primary" title="Worker creation is in progress" loading>
      Creating...
    </Button>
  </div>
</template>

Link as Button

Use LinkButton when the interaction should navigate somewhere but still look like a button. A disabled LinkButton renders a native disabled button without navigation attributes. The title prop uses the same accessible tooltip behavior as Button. LinkButton text remains selectable and copyable, including when disabled.

<script setup>
import { PhArrowSquareOut } from "@phosphor-icons/vue";
import { LinkButton } from "@dicehub/phi/components/button";
</script>

<template>
  <div class="flex flex-wrap items-center gap-3">
    <LinkButton
      href="/docs/components/link"
      variant="secondary"
      title="Read the Link component documentation"
    >
      Read Link docs
    </LinkButton>
    <LinkButton href="https://example.com/docs" variant="ghost" :icon="PhArrowSquareOut" external>
      External Docs
    </LinkButton>
    <LinkButton
      href="/docs/components/link"
      variant="secondary"
      title="You need access to open this destination"
      external
      download
      disabled
    >
      Restricted link
    </LinkButton>
  </div>
</template>

API Reference

Prop	Type	Default	Description
`variant`	`"primary" \| "secondary" \| "ghost" \| "destructive" \| "secondary-destructive" \| "outline"`	`"secondary"`	Sets the visual style of the button.
`size`	`"xs" \| "sm" \| "base" \| "lg"`	`"base"`	Sets the button height, padding, gap, and text size.
`shape`	`"base" \| "square" \| "circle"`	`"base"`	Sets the button shape. Use square or circle for icon-only actions.
`icon`	`Component`	`-`	Vue component rendered before the button label.
`iconProps`	`Record<string, unknown>`	`{}`	Props forwarded to the icon component.
`loading`	`boolean`	`false`	Shows a loading spinner and disables interaction.
`disabled`	`boolean`	`false`	Disables pointer and keyboard activation.
`title`	`string \| number`	`-`	Shows supporting context in a tooltip and labels a Button without text when no explicit accessible name is present.
`type`	`"button" \| "submit" \| "reset"`	`"button"`	Passes the native button type.
`tone`	`"accent" \| "neutral" \| "ghost"`	`-`	Compatibility alias for older Phi buttons. Prefer variant.
`href`	`string`	`-`	Required LinkButton target URL. It is not rendered when the LinkButton is disabled.
`external`	`boolean`	`false`	LinkButton opens in a new tab with safe external link attributes.