🚀 Atom Design Button — @atom-design-mog/buttons

A fully customizable React Native Button component supporting variants, sizes, icons, shapes, loading state, and disabled state. Built with MaterialCommunityIcons for rich icon support.

📦 Installation

npm install @atom-design-mog/buttons

or

yarn add @atom-design-mog/buttons

⚠️ Peer dependency: Ensure you have vector icons installed:

npm install react-native-vector-icons

📲 Import

import AButton from '@atom-design-mog/buttons';

✨ Features

• ✔ Multiple variants (solid, outlined, dashed, text, link, ghost)
• ✔ Small / Medium / Large sizes
• ✔ Shapes: default, square, round, circle
• ✔ Left or right icons (MaterialCommunityIcons)
• ✔ Loading spinner
• ✔ Disabled state
• ✔ Customizable color themes
• ✔ Lightweight & easy to integrate

🚀 Basic Usage

import React from 'react';
import { View } from 'react-native';
import AButton from '@atom-design-mog/buttons';

export default function App() {
  return (
    <View style={{ padding: 20 }}>
      <AButton 
        title="Click Me"
        color="primary"
        variant="solid"
        size="medium"
        onPress={() => console.log("Clicked")}
      />
    </View>
  );
}

🎛 Variants

Available button styles:

• solid

• outlined

• dashed

• text

• link

• ghost

📐 Sizes

• small

• medium

• large

⭕ Shapes

• default

• round

• square

• circle

🔔 Icons

Using MaterialCommunityIcons internally.

<AButton
  title="Add"
  icon="plus"
  iconPosition="left"
  variant="solid"
/>

🌀 Loading State

<AButton title="Loading..." loading />

🎛 Full Example (As used in your test screen)

import React from 'react';
import { ScrollView, Text, View } from 'react-native';
import AButton from '@atom-design-mog/buttons';

export default function ButtonsScreen() {
  const variants = ['solid', 'outlined', 'dashed', 'text', 'link', 'ghost'];
  const sizes = ['small', 'medium', 'large'];

  return (
    <ScrollView style={{ padding: 16 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 10 }}>
        Atom Design Buttons
      </Text>

      {variants.map(variant => (
        <View key={variant} style={{ marginBottom: 16 }}>
          <Text style={{ fontSize: 16, fontWeight: '600', marginBottom: 4 }}>
            {variant.toUpperCase()}
          </Text>
          <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
            {sizes.map(size => (
              <AButton
                key={size}
                title={`${variant} ${size}`}
                color="primary"
                variant={variant}
                size={size}
                icon="cart"
              />
            ))}
          </View>
        </View>
      ))}
    </ScrollView>
  );
}

📘 Props

| Prop | Type | Default | Description | | ---------------- | ------------------------------------------------------------- | --------- | -------------------------------- | | title | string | — | Label text | | color | "primary" ⎪ "secondary" ⎪ "success" ⎪ "warning" ⎪ "danger" | primary | Button accent color | | variant | "solid" ⎪ "outlined" ⎪ "dashed" ⎪ "text" ⎪ "link" ⎪ "ghost" | solid | Button style | | size | "small" ⎪ "medium" ⎪ "large" | medium | Button size | | shape | "default" ⎪ "square" ⎪ "round" ⎪ "circle" | default | Button shape | | icon | string | — | MaterialCommunityIcons icon name | | iconPosition | "left" ⎪ "right" | left | Where the icon appears | | disabled | boolean | false | Disable interaction | | loading | boolean | false | Shows ActivityIndicator | | onPress | function | — | Button click handler |

Author

Avi Gupta