Get boba!
boba Version 1.7.2
  • Introduction
  • Installation
  • Customize
  • Compatibility
  • Changelog
  • Breakpoints
  • Colors
  • Typography
  • Containers
  • Grid
  • Navbar
  • Sections
  • Sidebar
  • Banners
  • Breadcrumbs
  • Cards
  • Collapsible
  • Messages
  • Notifications
  • Pagination
  • Tabs
  • Tables
  • Blockquotes
  • Buttons
  • Code
  • Counters
  • Descriptions
  • Dividers
  • Labels
  • Lists
  • Progress
  • Checkboxes
  • Inputs
  • Radios
  • Selects
  • Switches
  • Textareas
  • Animations
  • Background
  • Borders
  • Display
  • Flex
  • Images
  • Shadows
  • Shapes
  • Sizing
  • Spacing
  • Text

Elements

Learn how to build your website with boba!

Labels

Labels come in all of boba's colors.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink
<span class="label red"> Red </span>
<a class="label green" href="#"> Green </a>

Sizes

Labels can be resized.
Small Default Medium Large
<span class="label green"> Green </span>

Styles

Change the look of your labels with ease.

Rounded

Make your labels pill-shaped using the .rounded class.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink
<span class="label green rounded"> Green </span>

Outlined

Add the .outlined class to make your labels simple colored outlines.
Default Red Orange Yellow Green Teal Blue Indigo Purple Pink
<span class="label green outlined"> Green </span>

Combinations

Use the .rounded class with the .outlined class to create the perfect label.
Red Green
<span class="label red rounded outlined"> Red </span>
<a class="label green rounded outlined" href="#"> Green </a>

Join Labels

Combine multiple labels into one segmented label using the .join-labels class.
build with boba
build with boba
<div class="join-labels">
    <span class="label outlined">build</span>
    <span class="label blue">with</span>
    <span class="label orange">boba</span>
</div>

<div class="join-labels">
    <a class="label rounded outlined" href="#">build</a>
    <a class="label blue" href="#">with</a>
    <a class="label orange rounded" href="#">boba</a>
</div>

Label Groups

Keep multiple labels grouped and equally spaced using the .label-group class.
Single Label
Double Label
build with boba
<div class="label-group">
    <span class="label pink">Single Label</span>
    <div class="join-labels">
        <span class="label purple">Double</span>
        <span class="label purple outlined">Label</span>
    </div>
    <div class="join-labels">
        <a class="label" href="#">build</a>
        <a class="label blue" href="#">with</a>
        <a class="label orange" href="#">boba</a>
    </div>
</div>