{"id":15572951,"url":"https://github.com/mdbootstrap/react-labels","last_synced_at":"2026-04-05T21:01:41.640Z","repository":{"id":60394708,"uuid":"542109522","full_name":"mdbootstrap/react-labels","owner":"mdbootstrap","description":" Responsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories \u0026 tags. Floating labels refer to forms, and slider labels to the range.","archived":false,"fork":false,"pushed_at":"2022-09-27T22:33:17.000Z","size":271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-08T15:06:26.214Z","etag":null,"topics":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","jsx","react-badges","react-bootstrap","react-input","react-range","reactjs"],"latest_commit_sha":null,"homepage":"https://mdbootstrap.com/docs/react/extended/labels/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mdbootstrap.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.pdf","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-09-27T13:50:01.000Z","updated_at":"2022-09-27T22:34:46.000Z","dependencies_parsed_at":"2022-09-29T01:20:19.931Z","dependency_job_id":null,"html_url":"https://github.com/mdbootstrap/react-labels","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/mdbootstrap/react-labels","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-labels","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-labels/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-labels/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-labels/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mdbootstrap","download_url":"https://codeload.github.com/mdbootstrap/react-labels/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mdbootstrap%2Freact-labels/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265787143,"owners_count":23828371,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap","bootstrap-template","bootstrap-theme","bootstrap5","css","html","jsx","react-badges","react-bootstrap","react-input","react-range","reactjs"],"created_at":"2024-10-02T18:09:01.698Z","updated_at":"2025-10-05T03:41:50.723Z","avatar_url":"https://github.com/mdbootstrap.png","language":"JavaScript","readme":"\nResponsive React Labels built with Bootstrap 5. Badge Labels are for counters, categories \u0026 tags. Floating labels refer to forms, and slider labels to the range.\n\nCheck out [React Bootstrap Labels Documentation](https://mdbootstrap.com/docs/react/extended/labels/) for detailed instructions \u0026 even more examples.\n\n\u003e :warning: **Important**: The term \"Bootstrap Label\" is currently very ambiguous. Many different elements are colloquially referred to as \"Labels\" by some developers. We created this page to help you find the proper component that you are looking for. You will find more examples of each one in the main documentation pages that are linked below.\n\n\n\n## Badge Labels\n\nThe valid term for Labels in React Bootstrap 5 is now [React Badges](https://mdbootstrap.com/docs/react/components/badges/). Make sure to jump straight to the Badges documentation if you are looking for more examples \u0026 customization options for the component from the example below.\n\n\n```jsx\nimport React from 'react';\nimport { MDBBadge } from 'mdb-react-ui-kit';\n\nexport default function App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch2\u003e\n        Example heading\n        \u003cMDBBadge className='ms-2'\u003eNEW\u003c/MDBBadge\u003e\n      \u003c/h2\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Floating Labels for Inputs\n\nThe term Label is now mainly used for the `label` element describing the input fields in form. Make sure to jump straight to the [React Input fields](https://mdbootstrap.com/docs/react/forms/input-fields/) documentation if you are looking for more examples \u0026 customization options for the component from the example below.\n\n```jsx\nimport React from 'react';\nimport { MDBInput } from 'mdb-react-ui-kit';\n\nexport default function Input() {\n  return (\n    \u003cMDBInput label='Example label' id='form1' type='text' /\u003e\n  );\n}\n```\n\n\n## How to use?\n\n1. Download MDB React - free UI KIT\n\n2. Choose your favourite customized component and click on the image\n\n3. Copy \u0026 paste the code into your MDB project\n\n[▶️ Subscribe to YouTube channel for web development tutorials \u0026 resources](https://www.youtube.com/MDBootstrap?sub_confirmation=1)\n\n___\n\n## More extended Bootstrap documentation\n\n\u003cul\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/code/\"\u003eReact Bootstrap Code\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gallery/\"\u003eReact Bootstrap Gallery\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hamburger-menu/\"\u003eReact Bootstrap Hamburger Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/jumbotron/\"\u003eReact Bootstrap Jumbotron\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/maps/\"\u003eReact Bootstrap Maps\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/mega-menu//\"\u003eReact Bootstrap Mega Menu\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/media-object/\"\u003eReact Bootstrap Media object\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/multiselect/\"\u003eReact Bootstrap Multiselect\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/masonry/\"\u003eReact Bootstrap Masonry\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/contact/\"\u003eReact Bootstrap Contact form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/gradients/\"\u003eReact Bootstrap Gradients\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/pagination/\"\u003eReact Bootstrap Pagination\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/panels/\"\u003eReact Bootstrap Panels\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/social-media/\"\u003eReact Bootstrap Social Media icons \u0026 buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/search/\"\u003eReact Bootstrap Search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-sort/\"\u003eReact Bootstrap Table sort\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-responsive/\"\u003eReact Bootstrap Table responsive\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-scroll/\"\u003eReact Bootstrap Table scroll\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-search/\"\u003eReact Bootstrap Table search\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/textarea/\"\u003eReact Bootstrap Textarea\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/sidebar/\"\u003eReact Bootstrap Sidebar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/profiles/\"\u003eReact Bootstrap Profiles\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/dropdown-multilevel/\"\u003eReact Bootstrap Nested Dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-address-form/\"\u003eReact Bootstrap Address Form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/back-to-top\"\u003eReact Scroll Back to Top button\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/product-cards\"\u003eReact Product Cards\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/avatar\"\u003eReact Avatar\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/carousel-with-thumbnails\"\u003eReact Carousel Slider with Thumbnails\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/chat\"\u003eReact Chat\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comparison-table\"\u003eReact Comparison table\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/comments\"\u003eReact Comments\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/drawer\"\u003eReact Drawer\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/faq\"\u003eReact FAQ component / section\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/invoice\"\u003eReact Invoice\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/news-feed\"\u003eReact News feed\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/offcanvas\"\u003eReact Offcanvas\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/order-details\"\u003eReact Order details\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/page-transitions\"\u003eReact Page transitions\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/quotes\"\u003eReact Quotes\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/payment-forms\"\u003eReact Payment forms\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/select-with-custom-input\"\u003eReact Select with custom Input\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/square-buttons\"\u003eReact Square Buttons\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonial-slider\"\u003eReact Testimonial Slider\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/testimonials\"\u003eReact Testimonials / Reviews\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/bootstrap-survey-form\"\u003eReact Survey form\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/timeline\"\u003eReact Timeline\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/to-do-list\"\u003eReact To Do List\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/padding\"\u003eReact Padding\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-size\"\u003eReact Modal Size\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-backdrop\"\u003eReact Modal Backdrop\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/css-text-animations\"\u003eReact CSS Text Animations\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/video\"\u003eReact Video\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/modal-methods\"\u003eReact Modal Show, Close, Hide \u0026 Toggle\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/card-deck\"\u003eReact Card deck\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/table-filter\"\u003eReact Table filter\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/slider\"\u003eReact Slider\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/logo\"\u003eReact Logo\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/popup\"\u003eReact Popup\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/weather\"\u003eReact Weather\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/hero\"\u003eReact Hero\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/max-width\"\u003eReact Max Width\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/select-dropdown\"\u003eReact Select dropdown\u003c/a\u003e\u003c/li\u003e\n\u003cli\u003e\u003ca href=\"https://mdbootstrap.com/docs/react/extended/labels\"\u003eReact Labels\u003c/a\u003e\u003c/li\u003e\n\u003c/ul\u003e","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-labels","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmdbootstrap%2Freact-labels","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmdbootstrap%2Freact-labels/lists"}