Pixelact Button
pixelact-ui/buttonFreeComponent
A simple button component.
Live preview
live · rendered by the registry
Rendered by Pixelact UI on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://pixelactui.com/r/button.jsonSource
1import * as React from "react";2import { cva, type VariantProps } from "class-variance-authority";3import { cn } from "@/lib/utils";4import { Button as ShadcnButton } from "@/components/ui/button";5import "@/components/ui/pixelact-ui/styles/styles.css";6import "./button.css";78const pixelButtonVariants = cva(9 "pixel__button pixel-font cursor-pointer rounded-none w-fit items-center justify-center whitespace-nowrap text-sm transition-colors transition-all duration-100",10 {11 variants: {12 variant: {13 default: "pixel-default__button box-shadow-margin bg-white text-black",14 secondary: "pixel-secondary__button box-shadow-margin",15 warning: "pixel-warning__button box-shadow-margin",16 success: "pixel-success__button box-shadow-margin",17 destructive: "pixel-destructive__button box-shadow-margin",18 link: "pixel-link__button bg-transparent text-link underline-offset-4 underline",19 },20 size: {21 default: "h-10 px-4 py-2",22 sm: "h-9 px-3 text-xs",23 lg: "h-11 px-8 text-base",24 },25 },26 defaultVariants: {27 variant: "default",28 size: "default",29 },30 }31);3233export interface PixelButtonProps34 extends React.ButtonHTMLAttributes<HTMLButtonElement>,35 VariantProps<typeof pixelButtonVariants> {36 asChild?: boolean;37}3839const Button = React.forwardRef<40 React.ComponentRef<typeof ShadcnButton>,41 PixelButtonProps42>(({ className, variant, size, ...props }, ref) => {43 return (44 <ShadcnButton45 {...props}46 className={cn(pixelButtonVariants({ variant, size }), className)}47 ref={ref}48 />49 );50});5152export { Button };
What it pulls in
Other registry items
Files it writes
More from Pixelact UI
All 28 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Pixelact Accordionaccordion | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Alertalert | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Alert Dialogalert-dialog | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Avataravatar | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Badgebadge | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Breadcrumbbreadcrumb | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Calendarcalendar | Pixelact UI | Components | Free | no deps · 2 files | |
| Pixelact Cardcard | Pixelact UI | Components | Free | no deps · 2 files |
