Base Button | Community Components | 21st

/Base Button/

Base Button

Renders a clickable button or an element styled as a button

Loading preview...

import { Button } from '@/components/ui/base-button';

export default function Component() {
  return (
    <Button variant="primary" className="mx-auto w-full max-w-96">
      Button
    </Button>
  );
}

More examples

DefaultOpen page →

Loading preview...

SecondaryOpen page →

Loading preview...

MonoOpen page →

Loading preview...

DesctructiveOpen page →

Loading preview...

OutlineOpen page →

Loading preview...

DashedOpen page →

Loading preview...

GhostOpen page →

Loading preview...

With iconOpen page →

Loading preview...

Icon onlyOpen page →

Loading preview...

LoadingOpen page →

Loading preview...

SizeOpen page →

Loading preview...

CircleOpen page →

Loading preview...

LinkOpen page →

Loading preview...

DisabledOpen page →

Loading preview...

Dependencies

lucide-react class-variance-authority @base-ui-components/react

Source

reui.io

Published

9/25/2025

Dependencies

Tags

Featured

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Dependencies

Tags

Dependencies

Tags

Base Button

More examples

Dependencies

Source

Published

Similar components