Button Utilities

Utility functions for generating button classes with variants, sizes, and styling options.

Import

import { getButtonClasses, getButtonVariant, getButtonSize } from "amvasdev-ui";

Functions

getButtonClasses

Returns a complete set of button classes including base styles, variant, size, and outline styles

getButtonClasses(options): string

Parameters:

  • options (optional) - Button styling options

Returns: string - Complete button class names

getButtonVariant

Returns only the variant-specific class names

getButtonVariant(variant): string

Parameters:

  • variant (required) - Button color variant

Returns: string - Variant-specific class names

getButtonSize

Returns only the size-specific class names

getButtonSize(size): string

Parameters:

  • size (required) - Button size

Returns: string - Size-specific class names

Interactive Demo

Preview:

Generated Classes:

ui:btn ui:rounded-field ui:btn-primary ui:btn-md

Examples

Complete Button Classes

import { getButtonClasses } from "amvasdev-ui";

const buttonClasses = getButtonClasses({
  variant: "primary",
  size: "lg",
  outlined: true,
});

<button className={buttonClasses}>
  Click me
</button>

Variant Only

import { getButtonVariant } from "amvasdev-ui";

const variantClasses = getButtonVariant("primary");

<button className={`btn ${variantClasses}`}>
  Primary Button
</button>

Size Only

import { getButtonSize } from "amvasdev-ui";

const sizeClasses = getButtonSize("lg");

<button className={`btn ${sizeClasses}`}>
  Large Button
</button>

Custom Component

import { getButtonClasses } from "amvasdev-ui";
import Link from "next/link";

function CustomLink({ href, children, variant = "primary" }) {
  const classes = getButtonClasses({ variant, size: "md" });

  return (
    <Link href={href} className={classes}>
      {children}
    </Link>
  );
}

Notes

  • Available variants: base, neutral, primary, secondary, accent, info, success, warning, error, ghost, link
  • Available sizes: xs, sm, md, lg