https://github.com/jayantur13/tbh-buttons
Button components for the web, a project to explore and learn typescript
https://github.com/jayantur13/tbh-buttons
bootstrap buttons components css frontend nextjs node package react tailwindcss
Last synced: 3 months ago
JSON representation
Button components for the web, a project to explore and learn typescript
- Host: GitHub
- URL: https://github.com/jayantur13/tbh-buttons
- Owner: jayantur13
- License: mit
- Created: 2023-10-12T07:02:01.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2026-03-29T09:22:06.000Z (3 months ago)
- Last Synced: 2026-03-29T12:46:04.807Z (3 months ago)
- Topics: bootstrap, buttons, components, css, frontend, nextjs, node, package, react, tailwindcss
- Language: TypeScript
- Homepage: https://tbhweb.pages.dev/
- Size: 1.39 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
tbh-buttons
Button components for the web.
Install • Features • Usage/Example • Attributes • Contributing
> Package is usable, but WIP.Demo and source will be [available here](https://github.com/jayantur13/tbhweb),their is no preset style
# Installation
```
//Using npm
npm install tbh-buttons
//Using yarn
yarn add tbh-buttons
//Using CDN
```
## Features
- Style using CSS,BS or tailwind etc
- Icons from your favourate, react-icons
- Share Util functions for few platforms
- Usable in a toast, dialog or sidebar etc
- Button components for loading, progress, progressbar, download
> If you want more control while sharing, try the platform sdks,if available
> The examples here use share dialog (share url) for simplicity
> Not gauranteed to work on mobile/tablet devices
## Example
```javascript
import { TbBrandFacebook } from "react-icons/tb";
import { Icon, IconButton, IconContainer } from "tbh-buttons";
import { FaWhatsapp } from "react-icons/fa";
import { fbShare, sendWAMessage } from "tbh-buttons";
function App() {
return (
<>
Rounded Button Style
{
fbShare("https://github.com");
}}
>
{
sendWAMessage("Check out this link at https://w3schools.com");
}}
className="bg-green-500 hover:bg-gray-100 transition duration-300 ease-in-out focus:outline-none border-none p-1 h-12 w-12 rounded-full group"
>
>
);
}
```
## Supported Attributes
| Component | Description | Attributes |
| --------------- | -------------- | -------------------------------- |
| Container | Returns div | See example (types file as well) |
| Button | Returns button | See example (types file as well) |
| Icon | Returns svg | See example (types file as well) |
| DLButton | download attr | See example (types file as well) |
| LoadingButton | See demo | See example (types file as well) |
| IndicatorButton | See demo | See example (types file as well) |
| PBButton | See demo | See example (types file as well) |
## Resources
- [React-Icons](https://react-icons.github.io/react-icons/)
- [React-hot-toast](https://react-hot-toast.com/)
- [mui](https://mui.com/)
> Visit above links for their license,as this project uses them.
## Support
Sponsor or star this project.For issues, use discussions or open a new issue.
## Contributing
Contributions are always welcome!
See [Contributing.md](https://github.com/jayantur13/tbh-buttons/blob/master/CONTRIBUTING.md) for ways to get started.
Please adhere to this project's [Code Of Conduct](https://github.com/jayantur13/tbh-buttons/blob/master/CODE_OF_CONDUCT.md).
## License
This project is licensed under the [MIT License](https://github.com/jayantur13/tbh-buttons/blob/master/LICENSE)