Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@cloudbees/honeyui-badge
Advanced tools
@cloudbees/honeyui-badge - npm Package Compare versions
Comparing version 2.1.1 to 2.2.0
| { | ||
| "name": "@cloudbees/honeyui-badge", | ||
| "version": "2.1.1", | ||
| "version": "2.2.0", | ||
| "description": "", | ||
@@ -27,3 +27,3 @@ "main": "dist/index.css", | ||
| }, | ||
| "gitHead": "c08e92cb5a16f831b381e110db00e88f9e4fbd8f" | ||
| "gitHead": "97201d65de8b898d8c5899ea2b4ec147a4fa4bc2" | ||
| } |
| import React from "react"; | ||
| export default ( | ||
| <div className="m-5"> | ||
| <h1> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h1> | ||
| <h2> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h2> | ||
| <h3> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h3> | ||
| <h4> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h4> | ||
| <h5> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h5> | ||
| <h6> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h6> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col"> | ||
| <p className="lead"> | ||
| Badges are used as a labelling component or small indicator. Badges are available for a | ||
| limited length of text in basic, button, contextual, pill, and link formats. | ||
| </p> | ||
| <hr className="pb-3"></hr> | ||
| <div className="row"> | ||
| <div className="col p-2"> | ||
| <h2>Basic Badges</h2> | ||
| <p> | ||
| Basic badges are used in-line to indicate information such as status or features to | ||
| the user like “beta”, “new”, “draft”, etc.{" "} | ||
| </p> | ||
| <div className="pt-3"> | ||
| <h1> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h1> | ||
| <h2> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h2> | ||
| <h3> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h3> | ||
| <h4> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h4> | ||
| <h5> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h5> | ||
| <h6> | ||
| Example heading <span className="badge badge-secondary">New</span> | ||
| </h6> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
| import React from "react"; | ||
| export default ( | ||
| <div className="m-5"> | ||
| <div className="m-5"> | ||
| <button type="button" className="btn btn-primary"> | ||
| Notifications <span className="badge badge-light ml-1">4</span> | ||
| </button> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col p-2"> | ||
| <h2>Button Badges</h2> | ||
| <p>Badges can be used as part of links or buttons to provide a counter.</p> | ||
| <div className="pt-3"> | ||
| <button type="button" className="btn btn-primary mr-2"> | ||
| Notifications <span className="badge badge-light">4</span> | ||
| </button> | ||
| <button type="button" className="btn btn-primary"> | ||
| Profile <span className="badge badge-light">9</span> | ||
| <span className="sr-only">unread messages</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="m-5"> | ||
| <button type="button" className="btn btn-primary"> | ||
| Profile <span className="badge badge-light ml-1">9</span> | ||
| <span className="sr-only">unread messages</span> | ||
| </button> | ||
| </div> | ||
| </div> | ||
| ); |
| import React from "react"; | ||
| export default ( | ||
| <div className="m-5"> | ||
| <span className="badge badge-primary mr-2">Primary</span> | ||
| <span className="badge badge-secondary mr-2">Secondary</span> | ||
| <span className="badge badge-success mr-2">Success</span> | ||
| <span className="badge badge-danger mr-2">Danger</span> | ||
| <span className="badge badge-warning mr-2">Warning</span> | ||
| <span className="badge badge-info mr-2">Info</span> | ||
| <span className="badge badge-light mr-2">Light</span> | ||
| <span className="badge badge-dark">Dark</span> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col p-2"> | ||
| <h2>Contextual Badges</h2> | ||
| <p> | ||
| Contextual badges apply color to the basic badge adding meaning and providing a visual | ||
| indication of things like success, info, warning, etc.{" "} | ||
| </p> | ||
| <p> | ||
| Keep in mind that color will not be conveyed to users of assistive technologies – such as | ||
| screen readers and similar assistive technologies.{" "} | ||
| </p> | ||
| <div className="pt-3"> | ||
| <span className="badge badge-primary mr-2">Primary</span> | ||
| <span className="badge badge-secondary mr-2">Secondary</span> | ||
| <span className="badge badge-success mr-2">Success</span> | ||
| <span className="badge badge-danger mr-2">Danger</span> | ||
| <span className="badge badge-warning mr-2">Warning</span> | ||
| <span className="badge badge-info mr-2">Info</span> | ||
| <span className="badge badge-light mr-2">Light</span> | ||
| <span className="badge badge-dark">Dark</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
| import React from "react"; | ||
| export default ( | ||
| <div className="m-5"> | ||
| <a href="#" className="badge badge-primary mr-2"> | ||
| Primary | ||
| </a> | ||
| <a href="#" className="badge badge-secondary mr-2"> | ||
| Secondary | ||
| </a> | ||
| <a href="#" className="badge badge-success mr-2"> | ||
| Success | ||
| </a> | ||
| <a href="#" className="badge badge-danger mr-2"> | ||
| Danger | ||
| </a> | ||
| <a href="#" className="badge badge-warning mr-2"> | ||
| Warning | ||
| </a> | ||
| <a href="#" className="badge badge-info mr-2"> | ||
| Info | ||
| </a> | ||
| <a href="#" className="badge badge-light mr-2"> | ||
| Light | ||
| </a> | ||
| <a href="#" className="badge badge-dark"> | ||
| Dark | ||
| </a> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col p-2"> | ||
| <h2>Linked Badges</h2> | ||
| <p> | ||
| Use linked badges to provide actionable badges with hover, pressed, and active states.{" "} | ||
| </p> | ||
| <div className="pt-3"> | ||
| <a href="#" className="badge badge-primary mr-2"> | ||
| Primary | ||
| </a> | ||
| <a href="#" className="badge badge-secondary mr-2"> | ||
| Secondary | ||
| </a> | ||
| <a href="#" className="badge badge-success mr-2"> | ||
| Success | ||
| </a> | ||
| <a href="#" className="badge badge-danger mr-2"> | ||
| Danger | ||
| </a> | ||
| <a href="#" className="badge badge-warning mr-2"> | ||
| Warning | ||
| </a> | ||
| <a href="#" className="badge badge-info mr-2"> | ||
| Info | ||
| </a> | ||
| <a href="#" className="badge badge-light mr-2"> | ||
| Light | ||
| </a> | ||
| <a href="#" className="badge badge-dark"> | ||
| Dark | ||
| </a> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
| import React from "react"; | ||
| export default ( | ||
| <div className="m-5"> | ||
| <span className="badge badge-pill badge-primary mr-2">Primary</span> | ||
| <span className="badge badge-pill badge-secondary mr-2">Secondary</span> | ||
| <span className="badge badge-pill badge-success mr-2">Success</span> | ||
| <span className="badge badge-pill badge-danger mr-2">Danger</span> | ||
| <span className="badge badge-pill badge-warning mr-2">Warning</span> | ||
| <span className="badge badge-pill badge-info mr-2">Info</span> | ||
| <span className="badge badge-pill badge-light mr-2">Light</span> | ||
| <span className="badge badge-pill badge-dark mr-2">Dark</span> | ||
| <div className="container"> | ||
| <div className="row"> | ||
| <div className="col p-2"> | ||
| <h2>Pill Badges</h2> | ||
| <p> | ||
| Pill badges are a rounded version of the contextual badges used only within the Docs team. | ||
| This style of badge should not be used within product design. | ||
| </p> | ||
| <div className="pt-3"> | ||
| <span className="badge badge-pill badge-primary mr-2">Primary</span> | ||
| <span className="badge badge-pill badge-secondary mr-2">Secondary</span> | ||
| <span className="badge badge-pill badge-success mr-2">Success</span> | ||
| <span className="badge badge-pill badge-danger mr-2">Danger</span> | ||
| <span className="badge badge-pill badge-warning mr-2">Warning</span> | ||
| <span className="badge badge-pill badge-info mr-2">Info</span> | ||
| <span className="badge badge-pill badge-light mr-2">Light</span> | ||
| <span className="badge badge-pill badge-dark mr-2">Dark</span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.6%
78014
- Lines of code
- increased by44.44%
195
No dependency changes