Button

Displays a button or a component that looks like a button.

Interactive Button Showcase

Basic Variants

Status Variants

Effect Variants

Animation Variants

Special States

Sizes

Interactive Examples

Icon Variations

1Installation

npm i elementra-ui

npm install clsx tailwind-merge

These utilities are required dependencies - clsx helps combine CSS class names conditionally, while tailwind-merge efficiently handles Tailwind CSS class merging and conflicts. They're essential for the proper functioning of Elementra UI components.

2Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder. this step add

? Select components to add ›
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   Button
◯   Card

Component button added successfully!

3:Using in Next Js

Import and use the Button component in your Next.js project. When you add a component using the CLI, it will be added to the components folder in the src directory. If you are using the app directory structure, the component will be added outside of the app folder.

import { Button } from "./components/ui/button";

export default function Buttons() {
  return (
    <div>
      <Button variant="default">Primary Button</Button>
      <Button variant="outline">Secondary Button</Button>
      <Button variant="ghost">Outline Button</Button>
    </div>
  )
}

4:Using In React Js

Import and use the Button component in your React.js project. When you add a component using the CLI, it will be added to the components folder in your project directory. Since React.js doesn't use the app directory structure like Next.js, you can organize your components directly in the components folder at the root level or within src/components.

import { Button } from "./components/ui/button";

export default function Buttons() {
  return (
    <div>
      <Button variant="default">Primary Button</Button>
      <Button variant="outline">Secondary Button</Button>
      <Button variant="ghost">Outline Button</Button>
    </div>
  )
}