Circle

<pa-circle> | PaCircle

A circular component for creating visual elements like status indicators, icon containers, or decorative accents.

<pa-circle variant="primary" />

TODO

Set a default variant so a circle can be seen without a variant set.

Examples

Basic Usage

<template>
  <pa-circle variant="primary"/>
</template>

Variants

<template>
  <div style="display: flex; gap: 1rem;">
    <pa-circle variant="primary" />
    <pa-circle variant="secondary" />
    <pa-circle variant="success" />
    <pa-circle variant="danger" />
    <pa-circle variant="warning" />
    <pa-circle variant="info" />
    <pa-circle variant="light" />
    <pa-circle variant="dark" />
  </div>
</template>

Sizes

<template>
  <div style="display: flex; gap: 1rem; align-items: center;">
    <pa-circle variant="primary" size="sm" />
    <pa-circle variant="primary" />
    <pa-circle variant="primary" size="lg" />
    <pa-circle variant="primary" size="xl" />
  </div>
</template>

With Icons

<template>
  <div style="display: flex; gap: 1rem;">
    <pa-circle variant="success" size="lg" class="pa-icon-container">
      <pa-icon icon="check-light" style="color: white;" />
    </pa-circle>
    <pa-circle variant="info" size="md" class="pa-icon-container">
      <pa-icon icon="info-circle-solid" style="color: white;" />
    </pa-circle>
  </div>
</template>

Use the pa-icon-container class to center icons within circles. For more information about available icons and naming conventions, see the Icon component documentation.

Importing

import { PaCircle } from '@payadvantage/ui-components'

Slots

Name	Description
(default)	Content to display inside the circle

Properties

Name	Description	Reflects	Type	Default
variant	Color variant	no	string	null
size	Size of the circle	no	string	'md'

Events

Name	Description	Event Detail
click	Emitted when circle is clicked	Native click event

Dependencies

None - this is a standalone component.