Base components documentation Badge, Braedcrumb, Banner

CoLab
, ,
1

Badge

Description:
The Badge component is a versatile element used to highlight key information. It can display content such as labels, counts, or indicators with optional icons on either side.

Usage:


import React from 'react';
import Badge from 'blendx-ui/Badge';

const MyBadge = () => (
  <Badge variant="success" size="lg" icon="check-circle" type="left-icon">
    Success
  </Badge>
);

export default MyBadge;

Props:

  • as (elementType): Specifies the element type for the component (default: span).
  • variant (string): Visual style of the badge (options: primary, secondary, success, danger, warning, info, light, dark; default: primary).
  • pill (bool): If true, applies a pill style to the badge, making it more rounded (default: false).
  • bsPrefix (string): Overrides the underlying component base CSS class name (default: badge).
  • children (node): The content to be displayed inside the badge.
  • size (string): Size of the badge, determining the font and icon size (default: md).
  • icon (string): Class name of the icon to display inside the badge.
  • type (string): Position or type of the icon (options: left-icon, right-icon, with-dot; default: left-icon).

Example:


<Badge variant="danger" size="sm" icon="exclamation-circle" type="right-icon">
  Alert
</Badge>

Breadcrumb

Description:
The Breadcrumb component provides navigation links that show the user’s current location within a website. It supports custom icons, labels, mobile views, and automatically truncates the links when there are more than four, displaying an ellipsis (…) in the middle.

Usage:


import React from 'react';
import Breadcrumb from 'blendx-ui/Breadcrumb';

const links = [
  { label: 'Home', icon: 'home-icon', url: '/' },
  { label: 'Library', icon: 'book-icon', url: '/library' },
  { label: 'Data', icon: 'data-icon', url: '/library/data' },
  { label: 'Current Page', icon: 'current-page-icon', url: '/library/data/current' },
];

const MyBreadcrumb = () => (
  <Breadcrumb 
    links={links} 
    ariaLabel="breadcrumb"
    variant="light"
  />
);

export default MyBreadcrumb;

Props:

  • links (array, required): An array of objects describing the links to be rendered. Each object should contain:

    • icon (string): The class name of the icon to display next to the label.
    • label (string, required): The text to display for the link.
    • url (string): The URL to navigate to when the link is clicked.

    Note: If there are more than four links, the breadcrumb will truncate the middle links and display an ellipsis (…).

  • activeLabel (string): A label that is not a link and is placed at the end of the breadcrumb.

  • ariaLabel (string): Accessibility label for the breadcrumb navigation (default: ‘breadcrumb’).

  • spacer (element): Custom element to place between breadcrumb items (default: > rendered with an Icon component).

  • clickHandler (func): A function to handle the onClick event for a breadcrumb link, useful for analytics.

  • variant (string): The visual style of the breadcrumb (options: light, dark; default: light).

  • isMobile (bool): Adjusts the breadcrumb for mobile view by showing only the last link (default: false).

  • linkAs (elementType): The element type to use when rendering links, typically ‘a’ or a router Link component (default: ‘a’).

Example:


import { Link } from 'react-router-dom';

const links = [
  { label: 'Home', icon: 'home-icon', url: '/' },
  { label: 'Category', icon: 'category-icon', url: '/category' },
  { label: 'Subcategory', icon: 'subcategory-icon', url: '/category/subcategory' },
  { label: 'Product', icon: 'product-icon', url: '/category/subcategory/product' },
  { label: 'Details', icon: 'details-icon', url: '/category/subcategory/product/details' },
];

<Breadcrumb 
  links={links} 
  spacer={<span>/</span>} 
  variant="dark" 
  isMobile={true} 
  linkAs={Link}
/>

In this example, since there are more than four links, the breadcrumb would show something like: Home / Category / … / Product / Details

Banner

Description:
The Banner component is a versatile alert-style component used to display important information at the top of the page. It supports various styles, optional dismiss functionality, icons, titles, descriptions, and links.

Usage:


import React, { useState } from 'react';
import Banner from 'blendx-ui/Banner';

const MyBanner = () => {
  const [show, setShow] = useState(true);

  const handleDismiss = () => {
    setShow(false);
  };

  return (
    <Banner
      show={show}
      variant="info"
      icon="info-icon"
      title="Notice"
      description="This is an important announcement."
      link={{ url: '/more-info', label: 'Learn More' }}
      dismissible
      onDismiss={handleDismiss}
    />
  );
};

export default MyBanner;

Props:

- `children` (node): An element to be rendered inside the banner.
- `dismissible` (bool): If true, the banner will include a dismiss button (default: false).
- `dismissAltText` (node): The alt text for the dismiss button, useful for accessibility (default: 'Dismiss').
  • onDismiss (func): A function to be called when the dismiss button is clicked (default: an empty function).
  • show (bool): Controls whether the banner is visible (default: true).
  • variant (string): The color variant of the banner, can be one of ‘primary’, ‘secondary’, ‘success’, ‘danger’, ‘warning’, ‘info’, ‘light’, ‘dark’, ‘red’, ‘green’, ‘blue’, ‘yellow’ (default: ‘primary’).
  • icon (string): A string representing the class name of an icon to display on the left side of the banner.
  • title (string): The title to be displayed in the banner.
  • description (string): A description text to be displayed alongside the title.
  • link (object): An optional link to display within the banner. The object should include:
    • url (string): The URL for the link.
    • label (string): The text to display for the link.
      className (string): Additional class names to be added to the banner.

Example:


<Banner
  show={true}
  variant="danger"
  icon="alert-icon"
  title="Error"
  description="Something went wrong."
  link={{ url: '/help', label: 'Get Help' }}
  dismissible
  onDismiss={() => alert('Banner dismissed')}
/>

In this example, the banner is displayed with a danger variant, an icon, a title, a description, and a dismiss button. The user can click the dismiss button to hide the banner.