{"_id":"@atom_design/button","_rev":"2-4085d3d18db77c0741641d1032a3269c","name":"@atom_design/button","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@atom_design/button","version":"1.0.0","keywords":["react-native","button","ui-component","atom-design","material-icons","customizable","accessible"],"author":{"name":"Atom Design"},"license":"MIT","_id":"@atom_design/button@1.0.0","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"dist":{"shasum":"f1426568f136d6aa22c229db7315f5add7e1467c","tarball":"https://registry.npmjs.org/@atom_design/button/-/button-1.0.0.tgz","fileCount":5,"integrity":"sha512-Zrk9/NiYgJMPuKKnDLfkts3YR6qK734cQzt5VqioZP1iGp6k5tRvIoFhObWMzgV/aaN1xxbljIJl99uu+KRYPA==","signatures":[{"sig":"MEQCIGISQrt27+f6YWGwS1zCXYQ9bjvRquDiaMX5gW/tNzFnAiAOJ8augAYdBLq4HAS6X0yTn2b06gyhnO9xFUWzc7KSeg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16555},"main":"index.js","types":"index.d.ts","_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"_npmVersion":"10.8.2","description":"A customizable React Native button component supporting icons, loading states, and multiple variants.","directories":{},"_nodeVersion":"20.19.5","_hasShrinkwrap":false,"peerDependencies":{"react":">=17.0.0","prop-types":">=15.0.0","react-native":">=0.64.0"},"peerDependenciesMeta":{"react-native-vector-icons":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/button_1.0.0_1764740649668_0.6165445313470688","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@atom_design/button","version":"1.0.1","description":"A customizable React Native button component supporting icons, loading states, and multiple variants.","main":"index.js","types":"index.d.ts","author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","button","ui-component","atom-design","material-icons","customizable","accessible"],"peerDependencies":{"react":">=17.0.0","react-native":">=0.64.0","prop-types":">=15.0.0"},"peerDependenciesMeta":{"react-native-vector-icons":{"optional":true}},"_id":"@atom_design/button@1.0.1","_nodeVersion":"20.19.5","_npmVersion":"10.8.2","dist":{"integrity":"sha512-n5TWKQAml81OCtAJDpfCU4cI4kZ6J9OdpOq0CMkQ7uJ7iRcRlVzjCoWsLZ18mW3nqFUGgekHqdbzjoCdHX04JQ==","shasum":"0f38d0037ac6821f150e1f601a8fbf53f6ed65a4","tarball":"https://registry.npmjs.org/@atom_design/button/-/button-1.0.1.tgz","fileCount":5,"unpackedSize":26160,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQDVBCMUnOJymI4B44oW2karI1M8rBzQMamjEUcIr/IwgAIgXQ8+SYNTjTNxF3FwOSMsXLmQPqRQ4vksv/4wcaCUM9o="}]},"_npmUser":{"name":"avi-moglix","email":"avi.gupta@moglix.com"},"directories":{},"maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/button_1.0.1_1764740861189_0.8045327050089834"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-03T05:44:09.565Z","modified":"2025-12-03T05:47:41.638Z","1.0.0":"2025-12-03T05:44:09.878Z","1.0.1":"2025-12-03T05:47:41.416Z"},"author":{"name":"Atom Design"},"license":"MIT","keywords":["react-native","button","ui-component","atom-design","material-icons","customizable","accessible"],"description":"A customizable React Native button component supporting icons, loading states, and multiple variants.","maintainers":[{"name":"moglix","email":"devops@moglix.com"},{"name":"avi-moglix","email":"avi.gupta@moglix.com"}],"readme":"# @atom_design/button\n\nA highly customizable, accessible React Native button component with support for icons, loading states, and multiple variants.\n\n## Features\n\n- 🎨 **5 Variants**: solid, outlined, dashed, text, link\n- 📐 **5 Types**: text, icon, textIcon, circle, square\n- 📏 **3 Sizes**: small, medium, large\n- 🔄 **Loading State**: Built-in loading spinner\n- ♿ **Accessible**: Full accessibility support\n- 🎯 **TypeScript**: Full TypeScript definitions included\n- 🔌 **Flexible Icons**: Works with any icon library\n\n## Installation\n\n```bash\nnpm install @atom_design/button\n# or\nyarn add @atom_design/button\n```\n\n### Peer Dependencies\n\n```bash\nnpm install react react-native prop-types\n# Optional: for icons\nnpm install react-native-vector-icons\n```\n\n## Usage\n\n### Basic Usage\n\n```jsx\nimport Button from '@atom_design/button';\n\n<Button title=\"Click Me\" onPress={() => console.log('Pressed!')} />\n```\n\n### With Icons\n\n```jsx\nimport Button from '@atom_design/button';\nimport Icon from 'react-native-vector-icons/MaterialIcons';\n\n// Text with left icon\n<Button\n  title=\"Add Item\"\n  leftIcon=\"add\"\n  iconComponent={Icon}\n  onPress={() => {}}\n/>\n\n// Text with right icon\n<Button\n  title=\"Next\"\n  rightIcon=\"arrow-forward\"\n  iconComponent={Icon}\n  onPress={() => {}}\n/>\n\n// Icon only (circle)\n<Button\n  type=\"circle\"\n  icon=\"add\"\n  iconComponent={Icon}\n  onPress={() => {}}\n/>\n```\n\n### Variants\n\n```jsx\n// Solid (default)\n<Button title=\"Solid\" variant=\"solid\" />\n\n// Outlined\n<Button title=\"Outlined\" variant=\"outlined\" />\n\n// Dashed\n<Button title=\"Dashed\" variant=\"dashed\" />\n\n// Text (no background)\n<Button title=\"Text\" variant=\"text\" />\n\n// Link (underlined)\n<Button title=\"Link\" variant=\"link\" />\n```\n\n### Sizes\n\n```jsx\n<Button title=\"Small\" size=\"small\" />\n<Button title=\"Medium\" size=\"medium\" />\n<Button title=\"Large\" size=\"large\" />\n```\n\n### Types\n\n```jsx\n// Text only (default)\n<Button title=\"Text\" type=\"text\" />\n\n// Text with icons\n<Button title=\"Text Icon\" type=\"textIcon\" leftIcon=\"star\" iconComponent={Icon} />\n\n// Icon only\n<Button type=\"icon\" icon=\"settings\" iconComponent={Icon} />\n\n// Circle icon button\n<Button type=\"circle\" icon=\"add\" iconComponent={Icon} />\n\n// Square icon button\n<Button type=\"square\" icon=\"menu\" iconComponent={Icon} />\n```\n\n### Loading State\n\n```jsx\n<Button title=\"Loading...\" loading={true} onPress={() => {}} />\n```\n\n### Disabled State\n\n```jsx\n<Button title=\"Disabled\" disabled={true} onPress={() => {}} />\n```\n\n### Custom Colors\n\n```jsx\n<Button\n  title=\"Custom Colors\"\n  color=\"#007AFF\"           // Primary color\n  textColor=\"#ffffff\"       // Text color\n  disabledColor=\"#cccccc\"   // Background when disabled\n  disabledTextColor=\"#999\"  // Text when disabled\n/>\n```\n\n### Custom Styling\n\n```jsx\n<Button\n  title=\"Custom Style\"\n  style={{ marginVertical: 10, shadowOpacity: 0.3 }}\n  textStyle={{ fontWeight: 'bold', letterSpacing: 1 }}\n  borderRadius={20}\n/>\n```\n\n### Custom Icon Component\n\nYou can use any icon library that follows the standard icon component interface:\n\n```jsx\nimport { Ionicons } from '@expo/vector-icons';\n\n<Button\n  title=\"With Ionicons\"\n  leftIcon=\"heart\"\n  iconComponent={Ionicons}\n/>\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `title` | `string` | `'Button'` | Button text |\n| `onPress` | `() => void` | - | Press handler |\n| `leftIcon` | `string` | - | Icon name for left side |\n| `rightIcon` | `string` | - | Icon name for right side |\n| `icon` | `string` | - | Icon for icon-only buttons |\n| `disabled` | `boolean` | `false` | Disable the button |\n| `loading` | `boolean` | `false` | Show loading spinner |\n| `size` | `'small' \\| 'medium' \\| 'large'` | `'medium'` | Button size |\n| `variant` | `'solid' \\| 'outlined' \\| 'dashed' \\| 'text' \\| 'link'` | `'solid'` | Visual style |\n| `type` | `'text' \\| 'icon' \\| 'textIcon' \\| 'circle' \\| 'square'` | `'text'` | Button type |\n| `color` | `string` | `'#d9232d'` | Primary color |\n| `textColor` | `string` | - | Text color |\n| `disabledColor` | `string` | `'#d7d7dc'` | Disabled background |\n| `disabledTextColor` | `string` | `'#fff'` | Disabled text color |\n| `borderRadius` | `number` | `6` | Border radius |\n| `iconComponent` | `ComponentType` | - | Custom icon component |\n| `iconSize` | `number` | - | Custom icon size |\n| `style` | `StyleProp<ViewStyle>` | - | Container styles |\n| `textStyle` | `StyleProp<TextStyle>` | - | Text styles |\n| `accessibilityLabel` | `string` | `title` | Accessibility label |\n| `accessibilityHint` | `string` | - | Accessibility hint |\n| `testID` | `string` | - | Test ID |\n\n## Accessibility\n\nThe Button component is fully accessible:\n\n- Uses `accessibilityRole=\"button\"`\n- Automatically sets `accessibilityLabel` from `title` (can be overridden)\n- Supports `accessibilityHint` for additional context\n- Correctly reports disabled state via `accessibilityState`\n\n## Size Reference\n\n| Size | Button Padding | Font Size | Icon Size | Circle/Square Size |\n|------|---------------|-----------|-----------|-------------------|\n| small | 8x10 | 12 | 16 | 32x32 |\n| medium | 12x14 | 14 | 20 | 40x40 |\n| large | 16x18 | 16 | 24 | 48x48 |\n\n## Full Test Screen Example\n\nCopy this complete screen to test all button variations in your app:\n\n```jsx\nimport React, { useState } from 'react';\nimport { ScrollView, View, Text, StyleSheet, Alert } from 'react-native';\nimport Button from '@atom_design/button';\nimport Icon from 'react-native-vector-icons/MaterialIcons';\n\nconst ButtonTestScreen = () => {\n  const [loading, setLoading] = useState(false);\n\n  const handlePress = (buttonName) => {\n    Alert.alert('Button Pressed', `You pressed: ${buttonName}`);\n  };\n\n  const handleLoadingPress = () => {\n    setLoading(true);\n    setTimeout(() => setLoading(false), 2000);\n  };\n\n  return (\n    <ScrollView style={styles.container} contentContainerStyle={styles.content}>\n      <Text style={styles.title}>@atom_design/button</Text>\n      <Text style={styles.subtitle}>Complete Component Test</Text>\n\n      {/* VARIANTS SECTION */}\n      <Text style={styles.sectionTitle}>Variants</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Solid\"\n          variant=\"solid\"\n          onPress={() => handlePress('Solid')}\n        />\n        <Button\n          title=\"Outlined\"\n          variant=\"outlined\"\n          onPress={() => handlePress('Outlined')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          title=\"Dashed\"\n          variant=\"dashed\"\n          onPress={() => handlePress('Dashed')}\n        />\n        <Button\n          title=\"Text\"\n          variant=\"text\"\n          onPress={() => handlePress('Text')}\n        />\n        <Button\n          title=\"Link\"\n          variant=\"link\"\n          onPress={() => handlePress('Link')}\n        />\n      </View>\n\n      {/* SIZES SECTION */}\n      <Text style={styles.sectionTitle}>Sizes</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Small\"\n          size=\"small\"\n          onPress={() => handlePress('Small')}\n        />\n        <Button\n          title=\"Medium\"\n          size=\"medium\"\n          onPress={() => handlePress('Medium')}\n        />\n        <Button\n          title=\"Large\"\n          size=\"large\"\n          onPress={() => handlePress('Large')}\n        />\n      </View>\n\n      {/* TYPES SECTION */}\n      <Text style={styles.sectionTitle}>Types</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Text Only\"\n          type=\"text\"\n          onPress={() => handlePress('Text Only')}\n        />\n        <Button\n          title=\"Text + Icon\"\n          type=\"textIcon\"\n          leftIcon=\"star\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Text + Icon')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          type=\"icon\"\n          icon=\"settings\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Icon')}\n        />\n        <Button\n          type=\"circle\"\n          icon=\"add\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Circle')}\n        />\n        <Button\n          type=\"square\"\n          icon=\"menu\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Square')}\n        />\n      </View>\n\n      {/* ICONS SECTION */}\n      <Text style={styles.sectionTitle}>With Icons</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Left Icon\"\n          leftIcon=\"arrow-back\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Left Icon')}\n        />\n        <Button\n          title=\"Right Icon\"\n          rightIcon=\"arrow-forward\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Right Icon')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          title=\"Both Icons\"\n          leftIcon=\"favorite\"\n          rightIcon=\"send\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Both Icons')}\n        />\n      </View>\n\n      {/* CIRCLE/SQUARE SIZES */}\n      <Text style={styles.sectionTitle}>Circle & Square Sizes</Text>\n      <View style={styles.row}>\n        <Button\n          type=\"circle\"\n          size=\"small\"\n          icon=\"add\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Small Circle')}\n        />\n        <Button\n          type=\"circle\"\n          size=\"medium\"\n          icon=\"add\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Medium Circle')}\n        />\n        <Button\n          type=\"circle\"\n          size=\"large\"\n          icon=\"add\"\n          iconComponent={Icon}\n          onPress={() => handlePress('Large Circle')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          type=\"square\"\n          size=\"small\"\n          icon=\"menu\"\n          iconComponent={Icon}\n          variant=\"outlined\"\n          onPress={() => handlePress('Small Square')}\n        />\n        <Button\n          type=\"square\"\n          size=\"medium\"\n          icon=\"menu\"\n          iconComponent={Icon}\n          variant=\"outlined\"\n          onPress={() => handlePress('Medium Square')}\n        />\n        <Button\n          type=\"square\"\n          size=\"large\"\n          icon=\"menu\"\n          iconComponent={Icon}\n          variant=\"outlined\"\n          onPress={() => handlePress('Large Square')}\n        />\n      </View>\n\n      {/* STATES SECTION */}\n      <Text style={styles.sectionTitle}>States</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Normal\"\n          onPress={() => handlePress('Normal')}\n        />\n        <Button\n          title=\"Disabled\"\n          disabled={true}\n          onPress={() => handlePress('Disabled')}\n        />\n        <Button\n          title={loading ? 'Loading...' : 'Click to Load'}\n          loading={loading}\n          onPress={handleLoadingPress}\n        />\n      </View>\n\n      {/* DISABLED VARIANTS */}\n      <Text style={styles.sectionTitle}>Disabled Variants</Text>\n      <View style={styles.row}>\n        <Button title=\"Solid\" variant=\"solid\" disabled />\n        <Button title=\"Outlined\" variant=\"outlined\" disabled />\n        <Button title=\"Dashed\" variant=\"dashed\" disabled />\n      </View>\n\n      {/* CUSTOM COLORS SECTION */}\n      <Text style={styles.sectionTitle}>Custom Colors</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Blue\"\n          color=\"#007AFF\"\n          onPress={() => handlePress('Blue')}\n        />\n        <Button\n          title=\"Green\"\n          color=\"#34C759\"\n          onPress={() => handlePress('Green')}\n        />\n        <Button\n          title=\"Purple\"\n          color=\"#AF52DE\"\n          onPress={() => handlePress('Purple')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          title=\"Blue Outlined\"\n          variant=\"outlined\"\n          color=\"#007AFF\"\n          onPress={() => handlePress('Blue Outlined')}\n        />\n        <Button\n          title=\"Green Dashed\"\n          variant=\"dashed\"\n          color=\"#34C759\"\n          onPress={() => handlePress('Green Dashed')}\n        />\n      </View>\n\n      {/* CUSTOM STYLING SECTION */}\n      <Text style={styles.sectionTitle}>Custom Styling</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Rounded\"\n          borderRadius={25}\n          onPress={() => handlePress('Rounded')}\n        />\n        <Button\n          title=\"Shadow\"\n          style={{\n            shadowColor: '#000',\n            shadowOffset: { width: 0, height: 4 },\n            shadowOpacity: 0.3,\n            shadowRadius: 6,\n            elevation: 8,\n          }}\n          onPress={() => handlePress('Shadow')}\n        />\n      </View>\n      <View style={styles.row}>\n        <Button\n          title=\"Custom Text\"\n          textStyle={{\n            fontStyle: 'italic',\n            letterSpacing: 2,\n            textTransform: 'uppercase',\n          }}\n          onPress={() => handlePress('Custom Text')}\n        />\n      </View>\n\n      {/* FULL WIDTH SECTION */}\n      <Text style={styles.sectionTitle}>Full Width</Text>\n      <Button\n        title=\"Full Width Button\"\n        style={{ width: '100%' }}\n        onPress={() => handlePress('Full Width')}\n      />\n      <View style={{ height: 10 }} />\n      <Button\n        title=\"Full Width Outlined\"\n        variant=\"outlined\"\n        leftIcon=\"check\"\n        iconComponent={Icon}\n        style={{ width: '100%' }}\n        onPress={() => handlePress('Full Width Outlined')}\n      />\n\n      {/* ACCESSIBILITY SECTION */}\n      <Text style={styles.sectionTitle}>Accessibility</Text>\n      <View style={styles.row}>\n        <Button\n          title=\"Accessible\"\n          accessibilityLabel=\"Submit form button\"\n          accessibilityHint=\"Double tap to submit the form\"\n          onPress={() => handlePress('Accessible')}\n        />\n      </View>\n\n      <View style={{ height: 50 }} />\n    </ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  content: {\n    padding: 20,\n  },\n  title: {\n    fontSize: 28,\n    fontWeight: 'bold',\n    textAlign: 'center',\n    marginBottom: 5,\n    color: '#333',\n  },\n  subtitle: {\n    fontSize: 16,\n    textAlign: 'center',\n    marginBottom: 30,\n    color: '#666',\n  },\n  sectionTitle: {\n    fontSize: 18,\n    fontWeight: '600',\n    marginTop: 25,\n    marginBottom: 15,\n    color: '#333',\n    borderBottomWidth: 1,\n    borderBottomColor: '#ddd',\n    paddingBottom: 5,\n  },\n  row: {\n    flexDirection: 'row',\n    flexWrap: 'wrap',\n    gap: 10,\n    marginBottom: 10,\n  },\n});\n\nexport default ButtonTestScreen;\n```\n\n### Usage in Your App\n\n```jsx\n// App.js or navigation screen\nimport ButtonTestScreen from './ButtonTestScreen';\n\n// In your navigator or directly\n<ButtonTestScreen />\n```\n\n## License\n\nMIT © Atom Design\n","readmeFilename":"README.md"}