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

Default chips

Use class variant prop in <NubraChips /> component for different variant of chips and use disabled prop for disabled chips.

Preview

Jsx

primary chip

secondary chip

Chips Disabled

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const DefaultChips = () => {

  return (
    <>
        <NubraChips variant="primary" >
            primary chip
        </NubraChips>
        <NubraChips variant="secondary" >
            secondary chip
        </NubraChips>
        <NubraChips variant="primary" disabled >
            Chips Disabled
        </NubraChips>
    </>
  );
};

export default DefaultChips;

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

Chips pill

Use pill prop in <NubraChips> component.

Preview

Jsx

Primary Chips

Secondary Chips

Disabled Chips

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const ChipPillExample = () => {

  return (
    <>
        <NubraChips variant="primary" pill >
            Primary Chips
        </NubraChips>
        <NubraChips variant="secondary" pill >
            Secondary Chips
        </NubraChips>
        <NubraChips variant="primary" pill disabled >
            Disabled Chips
        </NubraChips>
    </>
  );
};

export default ChipPillExample;

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

Chips tick

Use tickedprop for ticked chips.

Preview

Jsx

Ticked Chips

Disabled Chips

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const ChipTickExample = () => {

  return (
    <>
        <NubraChips variant="primary" ticked >
            Ticked Chips
        </NubraChips>
        <NubraChips variant="secondary" ticked >
            Ticked Chips
        </NubraChips>
        <NubraChips variant="secondary" ticked disabled>
            Disabled Chips
        </NubraChips>
    </>
  );
};

export default ChipTickExample;

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

Chips with icon

Use icon={your_icon} element in <NubraChips> for icons in chips.

Preview

Jsx

Icon Chips

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const ChipsWithIcons = () => {

  return (
    <>
        <NubraChips
            variant="primary"
            icon={<i className="ri-bookmark-3-line" />}
        >
            Icon Chips
        </NubraChips>
        <NubraChips
            variant="secondary"
            icon={<i className="ri-bookmark-3-line" />}
        >
            Icon Chips
        </NubraChips>
        <NubraChips
            variant="secondary"
            icon={<i className="ri-bookmark-3-line" />}
            disabled
        >
            Icon Chips
        </NubraChips>
    </>
  );
};

export default ChipsWithIcons;

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

Chips outline

Use variant="outline-*".

Preview

Jsx

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const ChipsOutline = () => {

  return (
    <>
        <NubraChips variant="outline-primary">
            Primary Chips
        </NubraChips>
        <NubraChips variant="outline-secondary">
            Secondary Chips
        </NubraChips>
        <NubraChips variant="outline-primary" pill>
            Primary Chips
        </NubraChips>
        <NubraChips variant="outline-secondary" pill>
            Secondary Chips
        </NubraChips>
        <NubraChips
            variant="outline-primary"
            icon={<i className="ri-bookmark-3-line" />}
        >
            Icon Chips
        </NubraChips>
        <NubraChips
            variant="outline-secondary"
            icon={<i className="ri-bookmark-3-line" />}
        >
            Icon Chips
        </NubraChips>
        <NubraChips
            variant="outline-primary"
            ticked
        >
            Ticked Chips
        </NubraChips>
        <NubraChips
            variant="outline-secondary"
            ticked
        >
            Ticked Chips
        </NubraChips>
        <NubraChips
            variant="outline-secondary"
            ticked
            disabled
        >
            Disabled Chips
        </NubraChips>
    </>
  );
};

export default ChipsOutline;

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

Chips dismissable

Use dismissable prop in <NubraChips> for dismissable chips

Preview

Jsx

Chips Dismissable

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';

const DismissableChipsExample = () => {

  return (
    <>
        <NubraChips variant="primary" dismissable >
            Chips Dismissable
        </NubraChips>
        <NubraChips variant="secondary" dismissable >
            Chips Dismissable
        </NubraChips>
        <NubraChips variant="primary" pill dismissable >
            Chips Dismissable
        </NubraChips>
        <NubraChips variant="outline-primary" dismissable >
            Chips Dismissable
        </NubraChips>
        <NubraChips variant="outline-secondary" dismissable >
            Chips Dismissable
        </NubraChips>
        <NubraChips variant="outline-secondary" pill dismissable >
            Chips Dismissable
        </NubraChips>
    </>
  );
};

export default DismissableChipsExample;

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

User chips

Use <NubraChips src={img_src} > for user chips

Preview

Jsx

Basic Chips

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';
//Images
import avatar11 from '../../../Assets/dist/img/avatar11.jpg';
import avatar12 from '../../../Assets/dist/img/avatar12.jpg';
import avatar13 from '../../../Assets/dist/img/avatar13.jpg';
import avatar14 from '../../../Assets/dist/img/avatar14.jpg';
import avatar15 from '../../../Assets/dist/img/avatar15.jpg';

const UserChipsExample = () => {

  return (
    <>
        <NubraChips variant="primary" src={avatar12} >
            Basic Chips
        </NubraChips>
        <NubraChips variant="secondary" src={avatar11} >
            Basic Chips
        </NubraChips>
        <NubraChips variant="secondary" src={avatar13} dismissable >
            Basic Chips
        </NubraChips>
        <NubraChips variant="outline-primary" src={avatar14} >
            Basic Chips
        </NubraChips>
        <NubraChips variant="outline-secondary" src={avatar15} dismissable >
            Basic Chips
        </NubraChips>
    </>
  );
};

export default UserChipsExample;

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

Sizing

Use lg props in <NubraChips> for lg chips.

Preview

Jsx

Chips

Basic Chips

Chips Lg

User Chips Lg

import React from 'react';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';
//Images
import avatar12 from '../../../Assets/dist/img/avatar12.jpg';

const ChipsSizes = () => {

  return (
    <>
        <NubraChips variant="secondary" >
            Chips
        </NubraChips>
        <NubraChips variant="secondary" src={avatar12} >
            Basic Chips
        </NubraChips>
        <NubraChips variant="secondary" lg>
            Chips Lg
        </NubraChips>
        <NubraChips variant="secondary" src={avatar12} lg>
            User Chips Lg
        </NubraChips>
    </>
  );
};

export default ChipsSizes;

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

Input Chips

Below is the example of input chips.

Preview

Jsx

Basic Chip1

Basic Chip2

Basic Chip3

import React, { useState } from 'react';
import { FormControl } from 'react-bootstrap';
import NubraChips from '../../../components/@nubra-chips/@nubra-chips';
import DisplayCard from '../../../components/CodeBlock/DisplayCard';

const ChipsSizes = () => {
    const [chipsList, setChipsList] = useState(["Basic Chip1", "Basic Chip2", "Basic Chip3"]);
    const [newChips, setNewChips] = useState("");

    const addChip = (e) => {
        if (e.key === 'Enter') {
            setChipsList((chips) => [...chips, newChips]);
            setNewChips("");
        }
    }
  return (
    <>
        <FormControl type="text" className="user-input-tagged" name="tag-3" placeholder="Add Chips"     value={newChips} onChange={e => setNewChips(e.target.value)} onKeyDown={addChip} />
        {chipsList.map((chips) => {
            return (
                <NubraChips variant="outline-secondary" dismissable >
                    {chips}
                </NubraChips>

            )
        })}
    </>
  );
};

export default ChipsSizes;

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