{"id":19639541,"url":"https://github.com/kiranjolisa/team-carbon-ui","last_synced_at":"2026-04-30T11:32:54.850Z","repository":{"id":119819601,"uuid":"357864882","full_name":"kiranjolisa/team-carbon-ui","owner":"kiranjolisa","description":"This project is an attempt by a team(Prasad Birari, Rinish Ojha, Vinayak PK and Kiran) to build a custom UI library for the react based front end project work.","archived":false,"fork":false,"pushed_at":"2021-04-20T12:22:01.000Z","size":2977,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-22T02:57:19.966Z","etag":null,"topics":["create-react-library","css3","react","react-ui-components","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiranjolisa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2021-04-14T10:28:44.000Z","updated_at":"2024-01-18T15:15:54.000Z","dependencies_parsed_at":"2023-05-05T08:08:51.075Z","dependency_job_id":null,"html_url":"https://github.com/kiranjolisa/team-carbon-ui","commit_stats":{"total_commits":28,"total_committers":3,"mean_commits":9.333333333333334,"dds":0.2857142857142857,"last_synced_commit":"41bd89321b091e47116a9c75e16b7a05ee40d948"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kiranjolisa/team-carbon-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranjolisa%2Fteam-carbon-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranjolisa%2Fteam-carbon-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranjolisa%2Fteam-carbon-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranjolisa%2Fteam-carbon-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiranjolisa","download_url":"https://codeload.github.com/kiranjolisa/team-carbon-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranjolisa%2Fteam-carbon-ui/sbom","scorecard":{"id":561109,"data":{"date":"2025-08-11","repo":{"name":"github.com/kiranjolisa/team-carbon-ui","commit":"41bd89321b091e47116a9c75e16b7a05ee40d948"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/28 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":"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":"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":"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":"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":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"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":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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 'main'"],"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":"Vulnerabilities","score":0,"reason":"83 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","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-w8qv-6jwh-64r5","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-3wcq-x3mq-6r9p","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-4gmj-3p3h-gm8h","Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","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-8mmm-9v2q-x3f9","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","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-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","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-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7","Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc","Warn: Project is vulnerable to: GHSA-rqff-837h-mm52","Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2","Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j","Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872","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-6fc8-4gx4-v693","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-20T13:43:25.474Z","repository_id":119819601,"created_at":"2025-08-20T13:43:25.474Z","updated_at":"2025-08-20T13:43:25.474Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32463892,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-29T22:27:22.272Z","status":"online","status_checked_at":"2026-04-30T02:00:05.929Z","response_time":57,"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":["create-react-library","css3","react","react-ui-components","styled-components"],"created_at":"2024-11-11T13:01:58.745Z","updated_at":"2026-04-30T11:32:50.760Z","avatar_url":"https://github.com/kiranjolisa.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# team-carbon-ui\n\n\u003e A custom UI library built for modular usage of styling components in React app.\n\n[![NPM](https://img.shields.io/npm/v/team-carbon-ui.svg)](https://www.npmjs.com/package/team-carbon-ui) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Install\n\n```bash\nnpm install --save team-carbon-ui\n```\n[#NOTE: Dependencies used: styled-components, classnames]\n\nSample Deployment: https://sample-ui-deployment.vercel.app/\n## Usage\n\n```jsx\nimport React, { Component } from 'react'\n\nimport MyComponent from 'team-carbon-ui'\nimport 'team-carbon-ui/dist/index.css'\n\nclass Example extends Component {\n  render() {\n    return \u003cMyComponent /\u003e\n  }\n}\n```\n## Available Components\n\n### Main Button \n\n#### When To Use\nThis button is used as the highlighted buttons on the landing page and is recommeded to use in that manner.\n\n#### How To Use\n```jsx\n\u003cMainButton onClick = {() =\u003e alert('Nothing')}\u003eHi there!\u003c/MainButton\u003e\n```\n#### Sample Implementation\n\n-![Main Button](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/MainButton.png)\n\n### Loading Spinner\n\n#### When To Use\nSpinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is\ndoing something from behind. \n\n#### How To Use\n```jsx\n  \u003cSpinner /\u003e\n```\n#### Sample Implementation\n-![Big Spinner](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/BigSpinnerLoading.png)\n\n### Display Card\n\n#### When To Use\nThese kinds of cards are generally used to depict informations regarding to a peculiar matter in-short. Here, in the context of our web app, it's used to display\nthe short format information regarding the fundraisers.\n\n#### How To Use\n```jsx\n\u003cDisplayCard /\u003e\n```\nThe above implementation will work since there are enough supplies for default parameters but the programmer using this library is advised to use their custom values.Like the one defined below\n```jsx\n  \u003cDisplayCard\n   title = \"Help Jasper Paul Rescue People Abandoned, Dying On The Streets. Support ‘The Second Chance’\"\n    imageURL = \"https://kettocdn.gumlet.io/media/campaign/342000/342482/image/wid323b78c9f7e9daa2179f02aa6cfffc4dbfbafc29.jpg?w=300\"\n    achievedPercent = 110\n    AuthorName = \"Jasper Paul\" \n    raisedValue= 123356\n    lastDonation = 7\n    daysLeft = 21\n    supportersCount = 13997\n    id/\u003e\n  ```\n\n#### Sample Implementation\n-![Display Card](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/DisplayCard.png)\n\n\n### Pay Button\n\n#### When To Use\nPay buttons are generally found oval shaped buttons that are used to initiate the payment process(basically accessing the payment gateway) within the website.\n\n#### How To Use\n  ```jsx\n  \u003cPayButton\u003ePay \u0026#8377;XXXX\u003c/PayButton\u003e\n  ```\n#### Sample Implementation\n-![Pay Button](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/PayButton.png)\n \n### Proceed to Pay Button\n\n#### When To Use\nSimilar to the above mentioned Pay Button but varies in size and padding to accomodate more texts.\n\n#### How To Use\n```jsx\n \u003cProceedToPayButton\u003eProceed to Pay \u0026#8377;XXXX\u003c/ProceedToPayButton\u003e\n ```\n#### Sample Implementation\n-![Proceed to Pay Button](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/ProceedToPayButton.png)\n\n### Payment Success Animation\n\n#### When To Use\nAfter successful completion of a payment, the user has to be made aware that the payment procedures were accomplised successfully and therefore \nthis anime does that job.\n\n#### How To Use\n```jsx\n \u003cPaymentSuccessAnime/\u003e\n ```\n \n#### Sample Implementation\n-![Payment Process Success](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/PaymentSuccessAnime.png)\n\n### Payment Failure Animation\n\n#### When To Use\nAfter incurring failure of a payment process, the user has to be made aware that the payment procedures weren't accomplised successfully and therefore \nthis anime does that job.\n\n#### How To Use\n```jsx\n \u003cPaymentFailureAnime/\u003e\n ```\n#### Sample Implementation\n-![Payment Process Failure](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/PaymentFailureAnime.png)\n\n### Progress Bar\n\n#### When To Use\nProgress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the \ntarget value can be portrayed using Progress Bar.\n\n#### How To Use\n```jsx\n \u003cProgressBar sliderColor = \"#01bfbd\" completed = {/*some numerical value out of 100 goes here*/} /\u003e\n ```\n#### Sample Implementation\n-![Progress Bar](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/ProgressBar.png)\n  \n ### Progress Bar (Thin)\n \n #### When To Use\nProgress bar renders a styled div that behaves like a measure revealer of something on a scale of 100. For example: Depiction of achieved percent of current value to the \ntarget value can be portrayed using Progress Bar. This UI component is very similar to the above one but the only diffeence is that it's relatively slimmer.\n\n#### How To Use\n```jsx\n \u003cProgressBarThin sliderColor = \"#01bfbd\" completed = {/*some numerical value out of 100 goes here*/} /\u003e\n ```\n\n#### Sample Implementation\n-![Progress Bar Thin](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/ProgressBarThin.png)\n   \n### Loading Spinner (Small)\n\n#### When To Use\nSpinner is used to make the screen equipped when the code is making some kind of API requests and that helps to let the user know that the application is\ndoing something from behind. This is very similar to the spinner mentioned above in the same documentation but smaller in as the name suggests, the choice\nof sizes depends on many UI design factors. \n\n#### How To Use\n```jsx\n\u003cSmallSpinner /\u003e\n```\n#### Sample Implementation\n-![Loading Spinner Small Size](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/SmallSpinnerLoading.png)\n\n### Sidebar \n\n#### When To Use\nInorder to enlist many things categorically in a styled format and at the same time has some tasks to be persued on the remain area of the application\nwhen they are clicked, sidebar gets handy on such scenarios. Here in the context of the web application developed by our team, the sidebars were used \nmainly to list the different categories of fundraisers and list them when the buttons are clicked.\n\n#### How To Use\n```jsx\n  \u003cSideBar\u003e\n    \u003cSideBarItem children = {[\"Item1\", \"Item2\", \"Item3\", \"Item4\"]} /\u003e\n  \u003c/SideBar\u003e\n  ```\n  Passing an array of items directly to the component will easily render a Sidebar without much hassle and that makes code look more neat.\n  \n#### Sample Implementation\n-![Sidebar](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/Sidebar.png)\n\n### Modal Box\n\n#### When To Use\nModal boxes are generally rendered for 2 cases, when the user has to be alerted with some sudden messages for their action or simplify the task or rendering a new page \nagain. For example: Payments are mostly initiated from the gateway owners site but this can be simplified by taking the essential values for payment such as name, card number, cvv etc with the help of modal and then calling and redirecting to an api that tests the correctness of the entry and take adequate actions.\n\n#### How To Use\n```jsx\n    \u003cModalBox\u003e\n    \u003cModalBodyDiv\u003e\n    \u003cCloseSpan/\u003e\n    \u003cModalHeader\u003eHeader Sec\u003c/ModalHeader\u003e\n      \u003cModalTextDiv\u003eSomething here\u003c/ModalTextDiv\u003e\n      \u003cModalButton\u003eNothing Happens\u003c/ModalButton\u003e\n    \u003c/ModalBodyDiv\u003e\n  \u003c/ModalBox\u003e\n```\n#### Sample Implementation\n-![Modal Box](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/ModalBox.png)\n\n### Buttons (Different implementation)\nThese buttons are very similar to the above mentioned buttons, the only difference is in their implementation.\n\n#### How To Use\n```jsx\n  \u003cButton type = \"secondary\" onClick= {()=\u003e {alert('user has clicked secondary button now')}}\u003eSecondary\u003c/Button\u003e\n  \u003cButton type = \"primary\" onClick= {()=\u003e {alert('user has clicked primary button now')}} \u003ePrimary\u003c/Button\u003e\n```\n\n#### Sample Implementation\n-![Primary Button](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/primaryButton.png)\n-![Secondary Button](https://github.com/kiranjolisa/team-carbon-ui/blob/main/readme_imgs/secondaryButton.png)\n\n## License\n\nMIT © [kiranjolisa](https://github.com/kiranjolisa)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiranjolisa%2Fteam-carbon-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiranjolisa%2Fteam-carbon-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiranjolisa%2Fteam-carbon-ui/lists"}