@ciptandaru/test-button

Komponen Button React yang dapat dikustomisasi dengan berbagai variant, ukuran, dan fitur loading.

Instalasi

npm install @ciptandaru/test-button

atau

yarn add @ciptandaru/test-button

Persyaratan

Package ini membutuhkan:

• React >= 18.1.0
• React DOM >= 16.8.0
• Tailwind CSS >= 3.0.0

Import

import { Button } from "@ciptandaru/test-button";
// atau
import Button from "@ciptandaru/test-button";

// Import types (opsional)
import { ButtonProps } from "@ciptandaru/test-button";

Penggunaan Dasar

import React from "react";
import { Button } from "@ciptandaru/test-button";

function App() {
  return (
    <div>
      <Button>Click Me</Button>
    </div>
  );
}

Props

| Prop | Type | Default | Deskripsi | | ----------- | --------------------------------------------------- | ----------- | --------------------------------------- | | variant | "primary" \| "secondary" \| "danger" \| "success" | "primary" | Variant warna button | | size | "small" \| "medium" \| "large" | "medium" | Ukuran button | | loading | boolean | false | Menampilkan loading spinner | | fullWidth | boolean | false | Button mengambil lebar penuh container | | children | ReactNode | - | Konten yang ditampilkan di dalam button | | disabled | boolean | false | Menonaktifkan button | | className | string | "" | Custom CSS classes tambahan |

Plus semua props HTML button standar lainnya (onClick, type, dll.)

Contoh Penggunaan

Variant Button

// Primary (default)
<Button>Primary Button</Button>

// Secondary
<Button variant="secondary">Secondary Button</Button>

// Danger
<Button variant="danger">Delete</Button>

// Success
<Button variant="success">Save</Button>

Ukuran Button

// Small
<Button size="small">Small Button</Button>

// Medium (default)
<Button size="medium">Medium Button</Button>

// Large
<Button size="large">Large Button</Button>

Loading State

<Button loading>Loading...</Button>

// Dengan variant dan ukuran
<Button variant="primary" size="large" loading>
  Processing...
</Button>

Full Width

<Button fullWidth>Full Width Button</Button>

Disabled State

<Button disabled>Disabled Button</Button>

Custom Event Handler

<Button variant="primary" onClick={() => alert("Button clicked!")}>
  Click Me
</Button>

Kombinasi Props

<Button variant="success" size="large" fullWidth onClick={handleSubmit}>
  Submit Form
</Button>

Styling

Button menggunakan Tailwind CSS untuk styling. Pastikan Tailwind CSS sudah dikonfigurasi di project Anda.

Custom Classes

Anda dapat menambahkan custom classes menggunakan prop className:

<Button className="shadow-lg hover:shadow-xl">Custom Styled Button</Button>

TypeScript

Package ini sudah include TypeScript definitions. Anda dapat menggunakan ButtonProps type untuk typing:

import React from "react";
import { Button, ButtonProps } from "@ciptandaru/test-button";

const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Fitur

• ✅ Responsif dan accessible
• ✅ Loading state dengan spinner
• ✅ Multiple variants (primary, secondary, danger, success)
• ✅ Multiple sizes (small, medium, large)
• ✅ Full width option
• ✅ TypeScript support
• ✅ Customizable dengan className
• ✅ Semua HTML button attributes didukung

Repository

Source code tersedia di: https://github.com/ciptandaru/test-button.git

Contributing

Kontribusi sangat diterima! Silakan buka issue atau submit pull request di repository GitHub.

License

Lihat file LICENSE di repository untuk informasi lisensi.