Square

<pa-square> | PaSquare

A square-shaped container component with rounded corners for displaying icons, badges, or other content. Perfect for avatars, status indicators, and decorative elements with consistent sizing and theming.

<pa-square variant="primary">
  <pa-icon icon="user-light" />
</pa-square>

Examples

Basic Usage

<template>
  <div style="display: flex; gap: 0.5rem;">
    <pa-square variant="primary">
      <pa-icon icon="user-light" />
    </pa-square>
    <pa-square variant="secondary">
      <pa-icon icon="cog-light" />
    </pa-square>
    <pa-square variant="success">
      <pa-icon icon="check-light" />
    </pa-square>
  </div>
</template>

Sizes

<template>
  <div style="display: flex; gap: 0.5rem; align-items: center;">
    <pa-square variant="primary" size="sm">
        <pa-icon icon="user-regular" size="sm"/>
    </pa-square>
    <pa-square variant="primary" size="md">
        <pa-icon icon="user-regular" size="md"/>
    </pa-square>
    <pa-square variant="primary" size="lg">
        <pa-icon icon="user-regular"size="lg" />
    </pa-square>
    <pa-square variant="primary" size="xl">
        <pa-icon icon="user-regular" size="xl"/>
    </pa-square>
  </div>
</template>

Importing

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

Slots

Slot Name	Description
default	Content to display inside the square container (typically icons or text)

Properties

Property	Type	Default	Description
variant	String	null	Color theme: 'primary', 'secondary', 'success', 'info', 'danger', 'light', 'dark'
size	String	'md'	Size of the square: 'sm' (32px), 'md' (40px), 'lg' (80px), 'xl' (120px)

Events

Event	Parameters	Description
click	event: MouseEvent	Emitted when the square is clicked

Dependencies

• pa-icon - Commonly used together for icon containers