badge()

The badge component allows you to create a small badge for adding information like contextual data that needs to stand out and get noticed. It is also often useful in combination with other elements like a user avatar to show a number of new messages.

Examples

Model

julia> @vars BadgeModel begin
          myicon = "bluetooth"
       end

View

julia> Html.div("Badge", class="text-h6", [
          badge("1.0.0+", color="primary")
       ])

Arguments

1. Content
   • floating::Bool - Tell badge if it should float to the top right side of the relative positioned parent element or not
   • transparent::Bool - Applies a 0.8 opacity; Useful especially for floating badge
   • multiline::Bool - Content can wrap to multiple lines
   • label::Union{String, Int} - Badge's content as string; overrides default slot if specified ex. "John Doe" 22
   • align::String - Sets vertical-align CSS attribute
   • outline::Bool - Use 'outline' design (colored text and borders only)
2. Style
   • color::String - Color name for component from the Color Palette ex. "primary" "teal-10"
   • textcolor::String - Overrides text color (if needed); Color name from the Color Palette ex. "primary" "teal-10"
   • rounded::Bool - Makes a rounded shaped badge