3.8 KiB
Using cl-sbt/badge Macros for Bootstrap Badges in a Web Application
- Introduction
- General Description from a UX Perspective
- Features of Bootstrap Badges
- Integrating cl-sbt/badge Macros
Introduction
The Bootstrap Badge component is a small, pill-shaped or circular indicator that adds contextual information to an item in your web application. Badges are versatile components that can be used for notifications, tags, status indicators, and more. They can be styled using contextual variations such as 'primary', 'secondary', 'success', 'danger', etc., and can be made round-shaped by adding .rounded-pill class.
General Description from a UX Perspective
Badges are small interactive elements in a user interface that typically convey a specific piece of information or serve as an indicator for something.
Visibility
Badges are usually designed to stand out, often with bright colors or distinctive shapes, so that the user's attention is drawn to them.
Contextual Information
Badges often carry critical or contextual information that helps the user make decisions or take action.
Affordance
The presence of a badge often indicates that the associated item is interactive and provides extra information or functionality.
Scalability
Because badges are typically small and non-intrusive, they can be easily added to existing interface elements without causing a major redesign.
Feedback and Micro-interactions
Badges can change dynamically based on user interaction or system status, giving immediate feedback to the user.
Aesthetic Value
A well-designed badge can also add to the aesthetic quality of an application, improving the overall user experience by making the interface more visually appealing.
Overuse
Like any UI element, badges should be used judiciously. Overuse can lead to a cluttered interface and may decrease their effectiveness.
Features of Bootstrap Badges
Contextual Variations
- Use classes like .bg-primary, .bg-success, etc., to style the badge.
Pill Badges
- Add .rounded-pill to make badges round.
Links
- Badges can be clickable if used within <a> or <button> elements.
Placement
- Can be placed on other Bootstrap components like buttons, navs, cards, etc.
Dismissable
- With extra HTML, badges can be made dismissable.
Integrating cl-sbt/badge Macros
To create Bootstrap-style badges in your Common Lisp web application, you can use the cl-sbt/badge macros. These macros provide a convenient way to generate the necessary HTML structure for badge components. Here's how you can integrate them into your project:
(defpackage my-web-app
(:use :cl :cl-sbt/badge :cl-sbt/btn)
(:export :generate-badge-page))
(in-package :my-web-app)
(defun generate-badge-page ()
"Generates an HTML page with badges using cl-sbt/badge macros."
(spinneret:with-html-string
(:html
(:head
(:title "Badge Example")
;; Include Bootstrap CSS and JavaScript links here
)
(:body
(:h1 "Badge Example")
(btn-primary () "Notifications " (badge-secondary "4"))
(badge-success "Updated")
;; Include more badges here
))))
(generate-badge-page)<html lang=en> <head> <meta charset=UTF-8> <title>Badge Example</title> </head> <body> <h1>Badge Example</h1> <button class="btn btn-primary" type=button>Notifications <span class="badge text-bg-secondary">4</span></button> <span class="badge text-bg-success">Updated</span> </body> </html>
This example demonstrates how to integrate cl-sbt/badge macros into a web application to create Bootstrap-style badges. By using these macros, you can quickly and easily add badges to your web application, customizing them to fit your needs.