Contextual variations

Add any preset modifier classes to change the appearance of a badge.

PrimarySecondarySuccessDangerWarningInfoLightDarkindigopinkpurpletheme

import React from 'react';
import { Badge } from 'react-bootstrap';

const ContextualBadges = () => {
  return (
    <>
        <Badge bg="primary">Primary</Badge>
        <Badge bg="secondary">Secondary</Badge>
        <Badge bg="success">Success</Badge>
        <Badge bg="danger">Danger</Badge>
        <Badge bg="warning">Warning</Badge>
        <Badge bg="info">Info</Badge>
        <Badge bg="light">Light</Badge>
        <Badge bg="dark">Dark</Badge>
        <Badge bg="indigo">indigo</Badge>
        <Badge bg="pink">pink</Badge>
        <Badge bg="purple">purple</Badge>
        <Badge bg="theme">theme</Badge>
    </>
  );
}

export default ContextualBadges;

props	Values	Default
`bg = ["value"]`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke	`primary`

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Pill badges

Use the pill prop to make badges more rounded.

Preview

Jsx

Props

PrimarySecondarySuccessDangerWarningInfoLightDark

import React from 'react';
import { Badge } from 'react-bootstrap';

const PillBadges = () => {
  return (
    <>
        <Badge pill bg="primary" >Primary</Badge>
        <Badge pill bg="secondary" >Secondary</Badge>
        <Badge pill bg="success" >Success</Badge>
        <Badge pill bg="danger" >Danger</Badge>
        <Badge pill bg="warning" >Warning</Badge>
        <Badge pill bg="info" >Info</Badge>
        <Badge pill bg="light">Light</Badge>
        <Badge pill bg="dark" >Dark</Badge>
    </>
  );
}

export default PillBadges;

props	Values	Default
`bg = ["value"]`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke	`primary`
`pill`	boolean	`false`

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Outline badges

Use the .badge-outline modifier class to create outline badges.

Preview

Jsx

Classes

PrimarySecondarySuccessDangerWarningInfoLightDarkPrimarySecondarySuccessDangerWarningInfoLightDark

import React from 'react';
import { Badge } from 'react-bootstrap';

const OutlineBadges = () => {
  return (
    <>
        <Badge bg="white" className="badge-primary  badge-outline ">Primary</Badge>
        <Badge bg="white" className="badge-secondary badge-outline ">Secondary</Badge>
        <Badge bg="white" className="badge-success badge-outline ">Success</Badge>
        <Badge bg="white" className="badge-danger badge-outline ">Danger</Badge>
        <Badge bg="white" className="badge-warning badge-outline ">Warning</Badge>
        <Badge bg="white" className="badge-info badge-outline ">Info</Badge>
        <Badge bg="white" className="badge-light badge-outline ">Light</Badge>
        <Badge bg="white" className="badge-dark badge-outline ">Dark</Badge>
        //Badges with pill
        <Badge pill bg="white" className="badge-primary  badge-outline ">Primary</Badge>
        <Badge pill bg="white" className="badge-secondary badge-outline ">Secondary</Badge>
        <Badge pill bg="white" className="badge-success badge-outline ">Success</Badge>
        <Badge pill bg="white" className="badge-danger badge-outline ">Danger</Badge>
        <Badge pill bg="white" className="badge-warning badge-outline ">Warning</Badge>
        <Badge pill bg="white" className="badge-info badge-outline ">Info</Badge>
        <Badge pill bg="white" className="badge-light badge-outline ">Light</Badge>
        <Badge pill bg="white" className="badge-dark badge-outline ">Dark</Badge>
    </>
  );
}

export default OutlineBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

ClassNames	Values
`className="badge-outline badge-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Soft badges

Create soft badges using .badge-soft-* modifier class.

Preview

Jsx

Classes

PrimarySecondarySuccessDangerWarningInfoPrimarySecondarySuccessDangerWarningInfo

import React from 'react';
import { Badge } from 'react-bootstrap';

const SoftBadges = () => {
  return (
    <>
        <Badge bg="light" className="badge-soft-primary">Primary</Badge>
        <Badge bg="light" className="badge-soft-secondary">Secondary</Badge>
        <Badge bg="light" className="badge-soft-success">Success</Badge>
        <Badge bg="light" className="badge-soft-danger">Danger</Badge>
        <Badge bg="light" className="badge-soft-warning">Warning</Badge>
        <Badge bg="light" className="badge-soft-info">Info</Badge>
        // soft badges with pill 
        <Badge pill bg="light" className="badge-soft-primary">Primary</Badge>
        <Badge pill bg="light" className="badge-soft-secondary">Secondary</Badge>
        <Badge pill bg="light" className="badge-soft-success">Success</Badge>
        <Badge pill bg="light" className="badge-soft-danger">Danger</Badge>
        <Badge pill bg="light" className="badge-soft-warning">Warning</Badge>
        <Badge pill bg="light" className="badge-soft-info">Info</Badge>
    </>
  );
}

export default SoftBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

ClassNames	Values
`className="badge-soft-[value]"`	primary / success / warning / danger / info / red / green / pink / purple / violet / indigo / blue / sky / cyan / teal / neon / lime / sun / yellow / orange / pumpkin / brown / grey / gold / smoke

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Link Bages

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Preview

Jsx

Primary Secondary Success Danger Warning Info Light Dark indigo pink Grey purple Primary Secondary Success Danger Warning Info Light Dark indigo Grey pink purple

import React from 'react';
import { Badge } from 'react-bootstrap';
import { Link } from 'react-router-dom';

const LinkBadges = () => {
  return (
    <>
        <Badge as={Link} to="#" bg="primary">Primary</Badge>
        <Badge as={Link} to="#" bg="secondary">Secondary</Badge>
        <Badge as={Link} to="#" bg="success">Success</Badge>
        <Badge as={Link} to="#" bg="danger">Danger</Badge>
        <Badge as={Link} to="#" bg="warning">Warning</Badge>
        <Badge as={Link} to="#" bg="info">Info</Badge>
        <Badge as={Link} to="#" bg="light" className="badge-light">Light</Badge>
        <Badge as={Link} to="#" bg="dark">Dark</Badge>
        <Badge as={Link} to="#" bg="indigo">indigo</Badge>
        <Badge as={Link} to="#" bg="pink">pink</Badge>
        <Badge as={Link} to="#" bg="grey">Grey</Badge>
        <Badge as={Link} to="#" bg="purple">purple</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-primary">Primary</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-secondary">Secondary</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-success">Success</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-danger">Danger</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-warning">Warning</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-info">Info</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-light">Light</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-dark">Dark</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-indigo">indigo</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-grey">Grey</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-pink">pink</Badge>
        <Badge as={Link} to="#" bg="white" className="badge-outline badge-purple">purple</Badge>
    </>
  );
}

export default LinkBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Sizes

use .badge-sm class for small badges.

Preview

Jsx

Classes

badgebadge-sm

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgeSizes = () => {
  return (
    <>
        <Badge bg="secondary">badge</Badge>
        <Badge bg="secondary" className="badge-sm">badge-sm</Badge>
    </>
  );
}

export default BadgeSizes;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

ClassNames	Values
`className="badge-[]"`	sm

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge indicator

Add .badge-indicator to display badge as an indicator.

Preview

Jsx

Priority

Overdue

Upcoming

Completed

Working

Processing

Not Started

Hold

Canceled

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgeIndicator = () => {
  return (
    <>
        <h6>Priority <Badge bg="primary" className="badge-indicator" /></h6>
        <h6>Overdue <Badge bg="danger" className="badge-indicator" /></h6>
        <h6>Upcoming <Badge bg="warning" className="badge-indicator" /></h6>
        <h6>Completed <Badge bg="success" className="badge-indicator" /></h6>
        <h6>Working <Badge bg="info" className="badge-indicator" /></h6>
        <h6>Processing <Badge bg="primary" className="badge-indicator" /></h6>
        <h6>Not Started <Badge bg="secondary" className="badge-indicator" /></h6>
        <h6>Hold <Badge bg="light" className="badge-indicator" /></h6>
        <h6>Canceled <Badge bg="dark" className="badge-indicator" /></h6>
    </>
  );
}

export default BadgeIndicator;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge with icon

Add any preset modifier classes to change the appearance of a badge. Using the contextual classes on an <a> element quickly provide actionable badges with hover and focus states.

Preview

Jsx

badgebadge sm

import React from 'react';
import { Badge } from 'react-bootstrap';
import { Package } from 'react-feather';

const BadgesWithIcons = () => {
  return (
    <>
        <Badge bg="primary">
            <span>
                <span className="icon">
                    <span className="feather-icon">
                        <Package />
                    </span>
                </span>
                badge
            </span>
        </Badge>
        <Badge bg="primary" className="badge-sm">
            <span>
                <span className="icon">
                    <span className="feather-icon">
                        <Package />
                    </span>
                </span>
                badge sm
            </span>
        </Badge>
    </>
  );
}

export default BadgesWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge indicator sizes

Add .badge-indicator to display badge as an indicator.

Preview

Jsx

Classes

With border

Without border

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgesWithIcons = () => {
  return (
    <>
        <div className="title-sm"><span>With border</span></div>
        <Badge bg="dark" className="badge-indicator badge-indicator-sm me-1" />
        <Badge bg="dark" className="badge-indicator me-1" />
        <Badge bg="dark" className="badge-indicator badge-indicator-lg me-1" />
        <Badge bg="dark" className="badge-indicator badge-indicator-xl me-1" />
        <div className="title-sm"><span>Without border</span></div>
        <Badge bg="dark" className="badge-indicator badge-indicator-nobdr-sm me-1" />
        <Badge bg="dark" className="badge-indicator badge-indicator-nobdr" />
    </>
  );
}

export default BadgesWithIcons;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

ClassNames	Values
`className="badge-indicator-[]"`	sm / lg / xl

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge with indicator

Use.badge-dot .

Preview

Jsx

badgebadge

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgesWithIndicators = () => {
  return (
    <>
        <Badge bg="primary">
            <span>
                <svg className="badge-dot" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                    <circle cx={8} cy={8} r={8} />
                </svg>
                badge
            </span>
        </Badge>
        <Badge bg="primary" className="badge-sm">
            <span>
                <svg className="badge-dot" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">
                    <circle cx={8} cy={8} r={8} />
                </svg>
                badge
            </span>
        </Badge>
    </>
  );
}

export default BadgesWithIndicators;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badges with headings

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Preview

Jsx

h1. Jampack heading New

h2. Jampack heading New

h3. Jampack heading New

h4. Jampack heading New

h5. Jampack heading New

h6. Jampack heading New

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgesWithHeadings = () => {
  return (
    <>
        <h1>
            h1. Jampack heading <Badge bg="secondary">New</Badge>
        </h1>
        <hr />
        <h2>
            h2. Jampack heading <Badge bg="secondary">New</Badge>
        </h2>
        <hr />
        <h3>
            h3. Jampack heading <Badge bg="secondary">New</Badge>
        </h3>
        <hr />
        <h4>
            h4. Jampack heading <Badge bg="secondary">New</Badge>
        </h4>
        <hr />
        <h5>
            h5. Jampack heading <Badge bg="secondary">New</Badge>
        </h5>
        <hr />
        <h6>
            h6. Jampack heading <Badge bg="secondary">New</Badge>
        </h6>
    </>
  );
}

export default BadgesWithHeadings;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Badge status

Wrap with .badge-status.

Preview

Jsx

Priority

Overdue

Upcoming

Completed

Working

Not Started

Hold

Canceled

import React from 'react';
import { Badge } from 'react-bootstrap';

const BadgesWithHeadings = () => {
  return (
    <>
        <h1>
            h1. Jampack heading <Badge bg="secondary">New</Badge>
        </h1>
        <hr />
        <h2>
            h2. Jampack heading <Badge bg="secondary">New</Badge>
        </h2>
        <hr />
        <h3>
            h3. Jampack heading <Badge bg="secondary">New</Badge>
        </h3>
        <hr />
        <h4>
            h4. Jampack heading <Badge bg="secondary">New</Badge>
        </h4>
        <hr />
        <h5>
            h5. Jampack heading <Badge bg="secondary">New</Badge>
        </h5>
        <hr />
        <h6>
            h6. Jampack heading <Badge bg="secondary">New</Badge>
        </h6>
    </>
  );
}

export default BadgesWithHeadings;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.

Button badges

Badges can be used as part of links or buttons to provide a counter.

Preview

Jsx

import React from 'react';
import { Badge, Button } from 'react-bootstrap';

const ButtonBadges = () => {
  return (
    <>
        <Button variant="primary">
            Notifications <Badge bg="light">15</Badge>
        </Button>
        <Button variant="secondary">
            Profile <Badge bg="light">9</Badge>
        </Button>
        <Button variant="info">
            Cart <Badge bg="light">4</Badge>
        </Button>
        <Button variant="success">
            Inbox <Badge bg="light">72</Badge>
        </Button>
        <Button variant="danger">
            Draft <Badge bg="light">5</Badge>
        </Button>
        <Button variant="warning">
            Tasks <Badge bg="light">6</Badge>
        </Button>
        <Button variant="light">
            Project <Badge bg="primary">18</Badge>
        </Button>
    </>
  );
}

export default ButtonBadges;

<!doctype html>Nubra UI - A Bootstrap based library of modern, reusable and flexible components designed specially for SaaS web applications.