{"id":13421922,"url":"https://github.com/rcaferati/react-awesome-button","last_synced_at":"2026-10-19T13:51:13.343Z","repository":{"id":37706499,"uuid":"89107446","full_name":"rcaferati/react-awesome-button","owner":"rcaferati","description":"React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱 ","archived":false,"fork":false,"pushed_at":"2026-07-11T01:30:36.000Z","size":12764,"stargazers_count":1343,"open_issues_count":9,"forks_count":133,"subscribers_count":16,"default_branch":"master","last_synced_at":"2026-10-18T18:23:16.474Z","etag":null,"topics":["animated","animation","button","component","progress","react","share","social"],"latest_commit_sha":null,"homepage":"https://react-awesome-button.caferati.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rcaferati.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-04-23T00:26:36.000Z","updated_at":"2026-10-18T16:50:56.000Z","dependencies_parsed_at":"2024-01-12T04:47:21.267Z","dependency_job_id":"5443daf2-6db3-49ba-826c-af8401cc10ff","html_url":"https://github.com/rcaferati/react-awesome-button","commit_stats":{"total_commits":234,"total_committers":7,"mean_commits":33.42857142857143,"dds":0.02991452991452992,"last_synced_commit":"4c59852f50f27b0cc389212da491e6d299dd09fa"},"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/rcaferati/react-awesome-button","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-button","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-button/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-button/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-button/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rcaferati","download_url":"https://codeload.github.com/rcaferati/react-awesome-button/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rcaferati%2Freact-awesome-button/sbom","scorecard":{"id":764354,"data":{"date":"2025-08-11","repo":{"name":"github.com/rcaferati/react-awesome-button","commit":"4c59852f50f27b0cc389212da491e6d299dd09fa"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 1/17 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 21 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"58 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-hpx4-r86g-5jrg","Warn: Project is vulnerable to: GHSA-prr3-c3m5-p7q2","Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-434g-2637-qmqr","Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m","Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw","Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p","Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747","Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6","Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548","Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq","Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-23T00:20:48.531Z","repository_id":37706499,"created_at":"2025-08-23T00:20:48.532Z","updated_at":"2025-08-23T00:20:48.532Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":344872684,"owners_count":38343413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-10-03T21:59:58.778Z","status":"online","status_checked_at":"2026-10-18T02:00:06.448Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animated","animation","button","component","progress","react","share","social"],"created_at":"2024-07-30T23:00:33.974Z","updated_at":"2026-10-19T13:51:13.335Z","avatar_url":"https://github.com/rcaferati.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript","Web version","SCSS","🎨 Design \u0026 UI"],"sub_categories":["Buttons","Full event control","Extra Content placement","🏆 Top 25"],"readme":"# React `\u003cAwesomeButton /\u003e` UI Components\n\n`@rcaferati/react-awesome-button` provides three related React button components:\n\n- **`AwesomeButton`** - animated base button\n- **`AwesomeButtonProgress`** - progress flow wrapper on top of `AwesomeButton`\n- **`AwesomeButtonSocial`** - social/share wrapper on top of `AwesomeButton`\n\nThis README is updated for the current `8.2.0` release outputs, including base CSS, bundled theme CSS files, theme mapping modules, animated size transitions, and auto-width text choreography.\n\n---\n\n## Preview\n\n[![Awesome Button visual preview](https://caferati.dev/images/rab.gif)](https://caferati.dev/images/rab.gif)\n\n---\n\n## Installation\n\n```bash\nnpm install @rcaferati/react-awesome-button\n```\n\n---\n\n## Quick Start\n\nImport the base stylesheet once, then render a button. This is the plain CSS path for buttons that do not pass a `cssModule` theme mapping.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButton type=\"primary\" size=\"medium\"\u003e\n      Button\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n---\n\n## Styling With Theme CSS Modules\n\nThe React package uses two theme imports together:\n\n1. the theme CSS file, which contains the actual rules\n2. the theme mapping object, which is passed as `cssModule`\n\n### Blue theme example\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButton cssModule={themeBlue} type=\"primary\" size=\"medium\"\u003e\n      Button\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Plain and themed buttons in the same app\n\nIf you mix plain buttons and themed buttons, import both:\n\n```js\nimport '@rcaferati/react-awesome-button/styles.css';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\n```\n\n### Bundled themes\n\n- `theme-amber`\n- `theme-blue`\n- `theme-bojack`\n- `theme-bruce`\n- `theme-c137`\n- `theme-eric`\n- `theme-flat`\n- `theme-indigo`\n- `theme-red`\n- `theme-rickiest`\n\n---\n\n## `AwesomeButton`\n\n### Basic button behavior\n\nIf `href` is not provided, `AwesomeButton` renders button-like behavior and calls `onPress` on successful activation.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButton\n      cssModule={themeBlue}\n      type=\"primary\"\n      size=\"medium\"\n      onPress={() =\u003e {\n        // do something\n      }}\u003e\n      Save changes\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Anchor mode (`href` provided)\n\nIf `href` is provided, the component renders anchor-like behavior and lets native navigation happen. Use `containerProps` for forwarded root element props such as `target`, `rel`, and `aria-*`.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButton\n      cssModule={themeBlue}\n      type=\"link\"\n      href=\"https://github.com/rcaferati\"\n      containerProps={{ target: '_blank', rel: 'noreferrer noopener' }}\u003e\n      Open website\n    \u003c/AwesomeButton\u003e\n  );\n}\n```\n\n### Icons\n\nUse `before` and `after` to render icons. For icon-only buttons, pass the icon with `before` and omit children.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nfunction StarIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M12 3l1.9 4.8L19 9.2l-4 3.4 1.3 5.2L12 15l-4.3 2.8L9 12.6 5 9.2l5.1-1.4L12 3z\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nfunction ArrowRightIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M5 12h14\" /\u003e\n      \u003cpath d=\"m13 5 7 7-7 7\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nfunction PlayIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M8 5v14l11-7z\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nexport default function Example() {\n  return (\n    \u003cdiv style={{ display: 'grid', gap: 12 }}\u003e\n      \u003cAwesomeButton\n        cssModule={themeBlue}\n        type=\"primary\"\n        size=\"medium\"\n        before={\u003cStarIcon /\u003e}\n        after={\u003cArrowRightIcon /\u003e}\u003e\n        Continue\n      \u003c/AwesomeButton\u003e\n\n      \u003cAwesomeButton\n        cssModule={themeBlue}\n        type=\"primary\"\n        size=\"medium\"\n        before={\u003cPlayIcon /\u003e}\n        containerProps={{ 'aria-label': 'Play' }}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Sizes and auto width\n\n- `size=\"small\" | \"medium\" | \"large\"` uses fixed button dimensions\n- `size={null}` uses content-driven auto width\n- fixed-size changes animate by default\n- measured auto-width changes animate by default\n- `animateSize={false}` opts out of both fixed-size and measured auto-width animation\n- fixed-to-auto and auto-to-fixed transitions are intentionally instant in this release\n\nSize animation timing is `125ms cubic-bezier(0.3, 0.05, 0.2, 1)`.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cdiv style={{ display: 'grid', gap: 12 }}\u003e\n      \u003cAwesomeButton type=\"primary\" size=\"small\"\u003e\n        Small\n      \u003c/AwesomeButton\u003e\n      \u003cAwesomeButton type=\"primary\" size=\"medium\"\u003e\n        Medium\n      \u003c/AwesomeButton\u003e\n      \u003cAwesomeButton type=\"primary\" size=\"large\"\u003e\n        Large\n      \u003c/AwesomeButton\u003e\n      \u003cAwesomeButton type=\"primary\" size={null}\u003e\n        Auto width grows with content\n      \u003c/AwesomeButton\u003e\n      \u003cAwesomeButton type=\"primary\" size=\"large\" animateSize={false}\u003e\n        Instant fixed-size change\n      \u003c/AwesomeButton\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Text transition (string labels only)\n\nUse `textTransition` when the button label is a plain string and you want label changes to animate.\n\nWhen combined with `size={null}`, the current React behavior is:\n\n- larger labels grow width first, then animate the text\n- smaller labels animate the text first, then shrink the width\n\nFor the parity flow documented in the current stories, drive the label change from an external rerender rather than mutating the same button label from its own `onPress`.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButton } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  const [expanded, setExpanded] = React.useState(false);\n  const label = expanded ? 'Open analytics dashboard' : 'Open';\n\n  return (\n    \u003cdiv style={{ display: 'grid', gap: 12 }}\u003e\n      \u003cAwesomeButton type=\"primary\" size={null} textTransition\u003e\n        {label}\n      \u003c/AwesomeButton\u003e\n\n      \u003cbutton type=\"button\" onClick={() =\u003e setExpanded((value) =\u003e !value)}\u003e\n        Toggle label length\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n---\n\n## `AwesomeButton` Props\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `type` | `string` | `\"primary\"` | Visual variant key, such as `primary`, `secondary`, `danger`, `link`, or a social visual variant |\n| `size` | `\"small\" \\| \"medium\" \\| \"large\" \\| null` | `null` | Size key or `null` for auto width |\n| `active` | `boolean` | `false` | Controlled pressed/active visual state |\n| `disabled` | `boolean` | `false` | Disables interactions |\n| `visible` | `boolean` | `true` | Toggles visible state class |\n| `placeholder` | `boolean` | `true` | If `true` and `children` is empty, renders placeholder/disabled state |\n| `lockedHover` | `boolean` | `false` | Locks the visual middle-hover position without changing interactivity |\n| `animateSize` | `boolean` | `true` | Animates fixed-size changes and measured auto-width changes |\n| `textTransition` | `boolean` | `false` | Animates string-only label changes with a scrambling transition |\n| `between` | `boolean` | `false` | Uses `space-between` layout for content |\n| `ripple` | `boolean` | `false` | Enables ripple effect on successful activation |\n| `moveEvents` | `boolean` | `true` | Enables pointer move position classes (`left` / `middle` / `right`) |\n| `href` | `string \\| null` | `null` | Enables anchor-like mode |\n| `element` | `React.ElementType \\| null` | `null` | Custom forwarded root element component |\n| `rootElement` | `string` | `\"aws-btn\"` | Base class prefix |\n| `className` | `string \\| null` | `null` | Extra class names |\n| `style` | `React.CSSProperties` | `{}` | Inline styles for the root element |\n| `containerProps` | `object` | `{}` | Additional props forwarded to the root element |\n| `cssModule` | `Record\u003cstring, string\u003e \\| null` | `null` | CSS module mapping object for themed usage |\n| `before` | `React.ReactNode` | `null` | Content rendered before the label |\n| `after` | `React.ReactNode` | `null` | Content rendered after the label |\n| `extra` | `React.ReactNode` | `null` | Extra content rendered inside the wrapper |\n| `children` | `React.ReactNode` | `null` | Main label/content |\n| `onPress` | `(event) =\u003e void` | `null` | Called on successful activation/release |\n| `onPressed` | `(event) =\u003e void` | `null` | Called when the press-in transition completes |\n| `onReleased` | `(element: HTMLElement) =\u003e void` | `null` | Called when the release cycle clears |\n| `onMouseDown` | `(event) =\u003e void` | `null` | Pointer/mouse/touch down callback |\n| `onMouseUp` | `(event) =\u003e void` | `null` | Pointer/mouse/touch up callback |\n\n```tsx\n\u003cAwesomeButton disabled lockedHover\u003e\n  Locked hover\n\u003c/AwesomeButton\u003e\n```\n\n---\n\n## `AwesomeButtonProgress`\n\n`AwesomeButtonProgress` wraps `AwesomeButton` and manages a guarded progress lifecycle. Its `onPress` receives a second callback argument:\n\n- `next(true)` starts the success flow\n- `next(false, 'Failed')` starts the error flow with an optional label override\n\n### Basic success flow\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonProgress } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nconst sleep = (ms) =\u003e new Promise((resolve) =\u003e setTimeout(resolve, ms));\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonProgress\n      cssModule={themeBlue}\n      type=\"primary\"\n      loadingLabel=\"Verifying...\"\n      resultLabel=\"Verified!\"\n      releaseDelay={500}\n      onPress={async (_event, next) =\u003e {\n        await sleep(900);\n        next(true);\n      }}\u003e\n      Verify\n    \u003c/AwesomeButtonProgress\u003e\n  );\n}\n```\n\n### Error flow\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonProgress } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nconst sleep = (ms) =\u003e new Promise((resolve) =\u003e setTimeout(resolve, ms));\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonProgress\n      type=\"danger\"\n      loadingLabel=\"Publishing...\"\n      resultLabel=\"Done!\"\n      onPress={async (_event, next) =\u003e {\n        await sleep(900);\n        next(false, 'Failed');\n      }}\u003e\n      Publish\n    \u003c/AwesomeButtonProgress\u003e\n  );\n}\n```\n\n### Text-only progress and custom bar timing\n\nUse `showProgressBar={false}` to keep the loading/result text flow while hiding the dark loading bar. Use `progressLoadingTime` to control how long the progress bar takes to advance during the loading phase.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonProgress } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nconst sleep = (ms) =\u003e new Promise((resolve) =\u003e setTimeout(resolve, ms));\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonProgress\n      type=\"primary\"\n      loadingLabel=\"Syncing...\"\n      resultLabel=\"Synced!\"\n      showProgressBar={false}\n      progressLoadingTime={1500}\n      onPress={async (_event, next) =\u003e {\n        await sleep(900);\n        next(true);\n      }}\u003e\n      Sync account\n    \u003c/AwesomeButtonProgress\u003e\n  );\n}\n```\n\n### With icon (`before`)\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonProgress } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nfunction ShieldIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M12 2l8 4v6c0 5-3.4 8.7-8 10-4.6-1.3-8-5-8-10V6l8-4z\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nconst sleep = (ms) =\u003e new Promise((resolve) =\u003e setTimeout(resolve, ms));\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonProgress\n      cssModule={themeBlue}\n      type=\"primary\"\n      size=\"medium\"\n      before={\u003cShieldIcon /\u003e}\n      loadingLabel=\"Verifying...\"\n      resultLabel=\"Verified!\"\n      onPress={async (_event, next) =\u003e {\n        await sleep(900);\n        next(true);\n      }}\u003e\n      Verify signature\n    \u003c/AwesomeButtonProgress\u003e\n  );\n}\n```\n\n### `AwesomeButtonProgress` specific props\n\n`AwesomeButtonProgress` accepts all `AwesomeButton` props except public `active`, and replaces the base `onPress` payload with the progress version below.\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `onPress` | `(event, next) =\u003e void` | `null` | Progress handler. Call `next(true)` or `next(false, label?)` |\n| `loadingLabel` | `string` | `\"Wait..\"` | Loading phase label |\n| `resultLabel` | `string` | `\"Success!\"` | Success label |\n| `releaseDelay` | `number` | `500` | Delay before reset after progress end |\n| `showProgressBar` | `boolean` | `true` | Hides the dark loading bar when `false`, while keeping the progress flow |\n| `progressLoadingTime` | `number` | `6000` | Loading-phase progress bar duration in milliseconds |\n\n---\n\n## `AwesomeButtonSocial`\n\n`AwesomeButtonSocial` wraps `AwesomeButton` and builds a share action when no custom `onPress` is provided.\n\n### Behavior summary\n\nOn activation, the current React behavior is:\n\n1. if you provide `onPress`, your handler is called and the built-in sharer logic is skipped\n2. if `href` is also present, native anchor navigation still happens because `href` is forwarded to the base button\n3. if there is no `href`, mobile-capable environments attempt `navigator.share(...)`\n4. otherwise, the built-in sharer uses a type-specific web share URL, direct URL, or centered popup where supported\n\nIf you want a pure custom action with no native navigation, avoid combining `onPress` and `href`.\n\n### Basic share example (LinkedIn)\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonSocial } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nfunction LinkedinIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M4 3.5A2.5 2.5 0 1 1 4 8.5a2.5 2.5 0 0 1 0-5zM2 10h4v11H2V10zm7 0h4v1.6c.6-1 1.9-1.9 3.9-1.9 4.2 0 5 2.8 5 6.4V21h-4v-4.4c0-2.1 0-3.8-2.3-3.8-2.3 0-2.6 1.8-2.6 3.7V21H9V10z\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonSocial\n      cssModule={themeBlue}\n      type=\"linkedin\"\n      before={\u003cLinkedinIcon /\u003e}\n      sharer={{\n        url: 'https://example.com',\n        message: 'Check this out',\n      }}\u003e\n      LinkedIn\n    \u003c/AwesomeButtonSocial\u003e\n  );\n}\n```\n\n### Visual-only social style (GitHub look, link behavior)\n\n`github` is a visual style in the bundled themes. If you want a GitHub-looking button that opens a profile or repo, use `href`.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonSocial } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n\nfunction GithubIcon() {\n  return (\n    \u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\n      \u003cpath d=\"M12 .5a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.4-4-1.4-.6-1.4-1.3-1.8-1.3-1.8-1.1-.7.1-.7.1-.7 1.2.1 1.8 1.2 1.8 1.2 1.1 1.8 2.8 1.3 3.5 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-5.9 0-1.3.5-2.4 1.2-3.2-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0c2.3-1.5 3.3-1.2 3.3-1.2.7 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .5z\" /\u003e\n    \u003c/svg\u003e\n  );\n}\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonSocial\n      cssModule={themeBlue}\n      type=\"github\"\n      href=\"https://github.com/rcaferati\"\n      containerProps={{ target: '_blank', rel: 'noreferrer noopener' }}\n      before={\u003cGithubIcon /\u003e}\u003e\n      Open GitHub\n    \u003c/AwesomeButtonSocial\u003e\n  );\n}\n```\n\n### WhatsApp example\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonSocial } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonSocial\n      type=\"whatsapp\"\n      sharer={{\n        phone: '5511999999999',\n        message: 'Hello from AwesomeButton',\n        url: 'https://example.com',\n      }}\u003e\n      WhatsApp\n    \u003c/AwesomeButtonSocial\u003e\n  );\n}\n```\n\n### Instagram-style button (direct URL fallback)\n\n`instagram` is treated as a direct URL fallback. It does not use a dedicated web popup sharer endpoint.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonSocial } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonSocial\n      type=\"instagram\"\n      sharer={{\n        url: 'https://example.com',\n        message: 'Open this link',\n      }}\u003e\n      Instagram\n    \u003c/AwesomeButtonSocial\u003e\n  );\n}\n```\n\n### `href` mode (bypass built-in sharer logic)\n\nIf `href` is present, the component behaves like an anchor and does not execute the built-in share flow.\n\n```jsx\nimport React from 'react';\nimport { AwesomeButtonSocial } from '@rcaferati/react-awesome-button';\nimport '@rcaferati/react-awesome-button/styles.css';\n\nexport default function Example() {\n  return (\n    \u003cAwesomeButtonSocial\n      type=\"github\"\n      href=\"https://github.com/rcaferati\"\n      containerProps={{ target: '_blank', rel: 'noreferrer noopener' }}\u003e\n      Open GitHub\n    \u003c/AwesomeButtonSocial\u003e\n  );\n}\n```\n\n### `AwesomeButtonSocial` specific props\n\n`AwesomeButtonSocial` accepts all `AwesomeButton` props and adds the props below.\n\n| Prop | Type | Default | Description |\n| --- | --- | --- | --- |\n| `sharer` | `object` | `{}` | Share payload source, with page metadata fallbacks where available |\n| `dimensions` | `{ width: number; height: number }` | `{ width: 640, height: 480 }` | Popup window dimensions for share flows |\n| `sharer.url` | `string` | current page URL | URL to share, falling back to `window.location.href` |\n| `sharer.message` | `string` | page title | Share message/text, falling back to the document title |\n| `sharer.image` | `string` | `og:image` meta | Image URL used by supported sharers such as Pinterest |\n| `sharer.phone` | `string` | `null` | Phone number for WhatsApp |\n| `sharer.user` | `string` | `null` | Username for Messenger direct flow |\n\n### Supported sharer `type` values\n\nThe built-in sharer recognizes:\n\n- `facebook`\n- `twitter`\n- `pinterest`\n- `linkedin`\n- `reddit`\n- `whatsapp`\n- `messenger`\n- `mail`\n- `instagram`\n\nYou can still use other `type` values as visual styles if your theme includes them, but the built-in sharer URLs do not exist for unsupported types.\n\n---\n\n## Recommended Patterns\n\n### Icon-only buttons\n\nUse `before` and omit `children`:\n\n```jsx\n\u003cAwesomeButton before={\u003csvg aria-hidden=\"true\" viewBox=\"0 0 24 24\" width=\"16\" height=\"16\"\u003e\u003cpath d=\"M8 5v14l11-7z\" /\u003e\u003c/svg\u003e} /\u003e\n```\n\n### Auto-width label choreography\n\nFor `size={null} + textTransition`, prefer an external rerender-driven label change:\n\n```jsx\nconst label = expanded ? 'Open analytics dashboard' : 'Open';\n\u003cAwesomeButton size={null} textTransition\u003e{label}\u003c/AwesomeButton\u003e\n```\n\n### Progress buttons\n\nUse:\n\n```jsx\nonPress={async (_event, next) =\u003e {\n  // do work\n  next(true);\n}}\n```\n\nDo not try to control the progress state manually through `active`.\n\n### Social buttons\n\nUse `before` for icons, `href` for visual-only social styles like `github`, and avoid combining `onPress` with `href` unless you explicitly want native navigation to continue.\n\n---\n\n## Package Exports\n\n### Root package\n\n```js\nimport {\n  AwesomeButton,\n  AwesomeButtonProgress,\n  AwesomeButtonSocial,\n} from '@rcaferati/react-awesome-button';\n```\n\n### Component subpaths\n\n```js\nimport AwesomeButton from '@rcaferati/react-awesome-button/AwesomeButton';\nimport AwesomeButtonProgress from '@rcaferati/react-awesome-button/AwesomeButtonProgress';\nimport AwesomeButtonSocial from '@rcaferati/react-awesome-button/AwesomeButtonSocial';\n```\n\n### Base stylesheet\n\n```js\nimport '@rcaferati/react-awesome-button/styles.css';\n```\n\n### Theme CSS files\n\n```js\nimport '@rcaferati/react-awesome-button/themes/theme-blue.css';\n```\n\n### Theme mapping modules\n\n```js\nimport themeBlue from '@rcaferati/react-awesome-button/themes/theme-blue';\n```\n\n### Published subpaths\n\n- `@rcaferati/react-awesome-button`\n- `@rcaferati/react-awesome-button/AwesomeButton`\n- `@rcaferati/react-awesome-button/AwesomeButtonProgress`\n- `@rcaferati/react-awesome-button/AwesomeButtonSocial`\n- `@rcaferati/react-awesome-button/styles.css`\n- `@rcaferati/react-awesome-button/themes/theme-*.css`\n- `@rcaferati/react-awesome-button/themes/theme-*`\n- `@rcaferati/react-awesome-button/package.json`\n\n---\n\n## Author\n\n**Rafael Caferati**  \nWebsite: https://caferati.dev  \nLinkedIn: https://linkedin.com/in/rcaferati  \nInstagram: https://instagram.com/rcaferati\n\n---\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-awesome-button","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frcaferati%2Freact-awesome-button","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frcaferati%2Freact-awesome-button/lists"}