Skip to content

Button

Base button component

Usage

Simple Button

preview
vue
<template>
  <p-button>Click me</p-button>
</template>

Button with icon

preview
vue
<template>
  <p-button color="info" icon><IconPersona /></p-button>
</template>

<script setup>
  import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
</script>

Button with icon + text

preview
vue
<template>
  <p-button color="info"><IconPersona /> Click Me</p-button>
  <p-button color="info">Click Me <IconPersona /></p-button>
</template>

<script setup>
  import IconPersona from '@privyid/persona-icon/vue/persona/20.vue'
</script>

Variants

Button has 4 variants, solid, outline, ghost, link. Default is solid

Default color

preview
vue
<template>
  <p-button variant="solid">Click me</p-button>
  <p-button variant="outline">Click me</p-button>
  <p-button variant="ghost">Click me</p-button>
  <p-button variant="link">Click me</p-button>
</template>

With Color

preview
vue
<template>
  <p-button color="info" variant="solid">Click me</p-button>
  <p-button variant="outline">Click me</p-button>
  <p-button color="info" variant="ghost">Click me</p-button>
  <p-button variant="link">Click me</p-button>
</template>

Colors

Button solid and ghost available in 5 different colors primary, info, success, warning and danger.

preview
vue
<template>
  <p-button color="primary">Click me</p-button>
  <p-button color="info">Click me</p-button>
  <p-button color="success">Click me</p-button>
  <p-button color="warning">Click me</p-button>
  <p-button color="danger">Click me</p-button>
</template>
ghost variant
vue
<template>
  <p-button variant="ghost" color="primary">Click me</p-button>
  <p-button variant="ghost" color="info">Click me</p-button>
  <p-button variant="ghost" color="success">Click me</p-button>
  <p-button variant="ghost" color="warning">Click me</p-button>
  <p-button variant="ghost" color="danger">Click me</p-button>
</template>

Button link and button outline are available in emphasis color to accommodate dark background (inverse).

link variant
vue
<template>
  <p-button variant="outline">Click me</p-button>
  <p-button variant="outline" color="emphasis">Click me</p-button>
  <p-button variant="link">Click me</p-button>
  <p-button variant="link" color="emphasis">Click me</p-button>
</template>

Sizing

There are 4 size variants that can be use: xs, sm, md, lg. default is md

preview
vue
<template>
  <p-button color="info" size="xs">Click me</p-button>
  <p-button color="info" size="sm">Click me</p-button>
  <p-button color="info" size="md">Click me</p-button>
  <p-button color="info" size="lg">Click me</p-button>
</template>

Pill mode

You can add prop pill to make button more rounded

preview
vue
<template>
  <p-button color="info" size="xs" pill>Click me</p-button>
  <p-button color="info" size="sm" pill>Click me</p-button>
  <p-button color="info" size="md" pill>Click me</p-button>
  <p-button color="info" size="lg" pill>Click me</p-button>
</template>

Icon mode

You can add prop icon to make button more square, it's suitable for button with icon only

preview
vue
<template>
  <p-button color="info" size="xs" icon><IconPersona /></p-button>
  <p-button color="info" size="sm" icon><IconPersona /></p-button>
  <p-button color="info" size="md" icon><IconPersona /></p-button>
  <p-button color="info" size="lg" icon><IconPersona /></p-button>
</template>

You can also combine with pill mode to make round button

preview
vue
<template>
  <p-button color="info" size="xs" icon pill><IconPersona /></p-button>
  <p-button color="info" size="sm" icon pill><IconPersona /></p-button>
  <p-button color="info" size="md" icon pill><IconPersona /></p-button>
  <p-button color="info" size="lg" icon pill><IconPersona /></p-button>
</template>

Disable state

link variant
vue
<template>
  <p-button color="info" variant="solid" disabled>Click me</p-button>
  <p-button variant="outline" disabled>Click me</p-button>
  <p-button variant="ghost" color="info" disabled>Click me</p-button>
  <p-button variant="link" disabled>Click me</p-button>
</template>

Loading state

link variant
vue
<template>
  <p-button color="info" variant="solid" loading>Click me</p-button>
  <p-button variant="outline" loading>Click me</p-button>
  <p-button variant="ghost" color="info" loading>Click me</p-button>
  <p-button variant="link" loading>Click me</p-button>
</template>

Variables

Button use local CSS variables on .btn for enhanced real-time customization.

sass
--p-button-xs-padding-x: theme(spacing.2);
--p-button-sm-padding-x: theme(spacing.4);
--p-button-md-padding-x: theme(spacing.5);
--p-button-lg-padding-x: theme(spacing.8);

/** only work in button variant link */
--p-button-xs-padding-y: theme(spacing[0.5]);
--p-button-sm-padding-y: theme(spacing.1);
--p-button-md-padding-y: theme(spacing[2.5]);
--p-button-lg-padding-y: theme(spacing.4);

API

Props

PropsTypeDefaultDescription
variantStringsolidButton style variant, valid value is solid, outline, ghost and link
colorString-Button color variant, valid value is primary, info, success, warning and danger
sizeStringmdSize of button, valid value is xs, sm, md, lg
pillBooleanfalseEnable pill mode
iconBooleanfalseEnable icon mode
disabledBooleanfalseDisable state
loadingBooleanfalseEnable loading state
hrefString or RouteLocationRaw-Place url in the button to make button-like permalink

Slots

NameDescription
defaultContent to place in button
loadingContent when loading

Events

NameArgumentsDescription
clickNative DOM Event objectEvent when button is clicked

Released under the MIT License.