tessl/npm-primevue

Comprehensive Vue.js UI component library with 140+ production-ready components, theming, and accessibility features

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

Button Components

Name: tessl/npm-primevue
Author: tessl

Button controls with various styles, grouping, split actions, and floating action buttons for user interactions.

Capabilities

Button

Standard button with icons, loading states, badges, and multiple severities.

/**
 * Standard button component with comprehensive styling options
 */
import Button from "primevue/button";

interface ButtonProps extends BaseComponentProps {
  label?: string;
  icon?: string;
  iconPos?: "left" | "right" | "top" | "bottom";
  iconClass?: string;
  badge?: string;
  badgeClass?: string;
  badgeSeverity?: "secondary" | "info" | "success" | "warning" | "help" | "danger" | "contrast";
  loading?: boolean;
  loadingIcon?: string;
  as?: string;
  asChild?: boolean;
  link?: boolean;
  severity?: "secondary" | "success" | "info" | "warning" | "help" | "danger" | "contrast";
  raised?: boolean;
  rounded?: boolean;
  text?: boolean;
  outlined?: boolean;
  size?: "small" | "large";
  plain?: boolean;
}

Usage Example:

<template>
  <Button label="Submit" icon="pi pi-check" :loading="loading" />
  <Button label="Save" icon="pi pi-save" severity="success" />
  <Button icon="pi pi-search" rounded />
</template>

SplitButton

Button with dropdown menu for additional actions.

/**
 * Split button with dropdown actions
 */
import SplitButton from "primevue/splitbutton";

interface SplitButtonProps extends BaseComponentProps {
  label?: string;
  icon?: string;
  model?: MenuItem[];
  autoZIndex?: boolean;
  baseZIndex?: number;
  appendTo?: string;
  disabled?: boolean;
  severity?: "secondary" | "success" | "info" | "warning" | "help" | "danger" | "contrast";
  raised?: boolean;
  rounded?: boolean;
  text?: boolean;
  outlined?: boolean;
  size?: "small" | "large";
  plain?: boolean;
  menuButtonIcon?: string;
}

SpeedDial

Floating action button with expandable sub-actions.

/**
 * Floating action button with sub-actions
 */
import SpeedDial from "primevue/speeddial";

interface SpeedDialProps extends BaseComponentProps {
  model?: MenuItem[];
  visible?: boolean;
  direction?: "up" | "down" | "left" | "right" | "up-left" | "up-right" | "down-left" | "down-right";
  transitionDelay?: number;
  type?: "linear" | "circle" | "semi-circle" | "quarter-circle";
  radius?: number;
  mask?: boolean;
  disabled?: boolean;
  hideOnClickOutside?: boolean;
  buttonClass?: string;
  maskClass?: string;
  maskStyle?: any;
  showIcon?: string;
  hideIcon?: string;
  rotateAnimation?: boolean;
  class?: string;
  style?: any;
  tooltipOptions?: object;
  ariaLabel?: string;
  ariaLabelledBy?: string;
}

Install with Tessl CLI