Elements Page

Buttons

<!-- Solid Buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<!-- Outline Buttons -->
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

<!-- Icon Buttons -->
<button type="button" class="btn btn-primary h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-video f-s-18"></i>
</button>

<button type="button" class="btn btn-secondary h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-phone-call f-s-18"></i>
</button>

<button type="button" class="btn btn-outline-primary h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-volume f-s-18"></i>
</button>

<button type="button" class="btn btn-outline-secondary h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-search f-s-18"></i>
</button>

<button type="button" class="btn btn-light-warning h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-book-2 f-s-18"></i>
</button>

<button type="button" class="btn btn-light-secondary h-45 w-45 icon-btn b-r-16">
  <i class="ti ti-clipboard-text f-s-18"></i>
</button>

Avatars

<!-- Single Avatars with images and text/icons -->
<div class="d-flex gap-3 flex-wrap">
    <!-- Image avatars -->
    <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-primary">
        <img alt="avatar" class="img-fluid" src="../assets/images/avatar/1.png">
    </div>
    <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-secondary">
        <img alt="avatar" class="img-fluid" src="../assets/images/avatar/2.png">
    </div>
    <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-success">
        <img alt="avatar" class="img-fluid" src="../assets/images/avatar/3.png">
    </div>
    <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-info">
        <img alt="avatar" class="img-fluid" src="../assets/images/avatar/4.png">
    </div>
    <div class="h-45 w-45 d-flex-center b-r-16 overflow-hidden text-bg-success">
        <img alt="avatar" class="img-fluid" src="../assets/images/avatar/5.png">
    </div>

    <!-- Text avatars -->
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-primary">ab</div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-secondary">ad</div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-warning">lm</div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-success">b</div>

    <!-- Icon avatars -->
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-danger"><i class="ti ti-message-circle f-s-18"></i></div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-dark"><i class="ti ti-user f-s-18"></i></div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-primary"><i class="ti ti-video f-s-18"></i></div>
    <div class="h-45 w-45 d-flex-center text-uppercase b-r-16 overflow-hidden text-bg-success"><i class="ti ti-volume f-s-18"></i></div>
</div>

<!-- Avatars with status indicators -->
<div class="d-flex gap-3 flex-wrap mt-3">
    <span class="bg-danger h-45 w-45 d-flex-center b-r-50 position-relative">
        <i class="ti ti-user f-s-18"></i>
        <span class="position-absolute top-5 start-1 top-0 p-1 bg-danger border border-light rounded-circle"></span>
    </span>
    <span class="bg-success h-45 w-45 d-flex-center b-r-50 position-relative">
        <i class="ti ti-user f-s-18"></i>
        <span class="position-absolute bottom-0 start-1 p-1 bg-success border border-light rounded-circle"></span>
    </span>
    <span class="bg-warning h-45 w-45 d-flex-center b-r-50 position-relative">
        <i class="ti ti-user f-s-18"></i>
        <span class="position-absolute bottom-0 end-0 p-1 bg-warning border border-light rounded-circle"></span>
    </span>
    <span class="bg-secondary h-45 w-45 d-flex-center b-r-50 position-relative">
        <img alt="avatar" class="img-fluid b-r-50" src="../assets/images/avatar/1.png">
        <span class="position-absolute top-0 end-0 p-1 bg-success border border-light rounded-circle"></span>
    </span>
</div>

<!-- Avatar groups with images, text, and indicators -->
<div class="d-flex gap-3 flex-wrap mt-3">
    <ul class="avatar-group">
        <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-primary">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/4.png">
        </li>
        <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-success" data-bs-title="Lennon Briggs" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/5.png">
        </li>
        <li class="h-45 w-45 d-flex-center b-r-50 overflow-hidden text-bg-danger" data-bs-title="Maya Horton" data-bs-toggle="tooltip">
            <img alt="avatar" class="img-fluid" src="../assets/images/avatar/6.png">
        </li>
    </ul>

    <!-- Text avatars -->
    <ul class="avatar-group">
        <li class="text-bg-primary h-45 w-45 d-flex-center b-r-50" data-bs-title="Athena Stewart" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
        <li class="text-bg-secondary h-45 w-45 d-flex-center b-r-50" data-bs-title="Connor Collins" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
        <li class="text-bg-success h-45 w-45 d-flex-center b-r-50" data-bs-title="Raiden Simpson" data-bs-toggle="tooltip"><i class="ti ti-user f-s-18"></i></li>
    </ul>
</div>

Badges

seen fail Deliver 4 6+ 8+

Primary Secondary Success Danger Warning Info Dark

<!-- Badge Examples -->
<div class="d-flex align-items-center gap-3 flex-wrap">
    <!-- Status badges -->
    <span class="replay-status seen">seen</span>
    <span class="replay-status fail">fail</span>
    <span class="replay-status deliver">Deliver</span>

    <!-- Number badges -->
    <span class="badge tag-badge bg-warning rounded">4</span>
    <span class="badge tag-badge bg-primary rounded">6+</span>
    <span class="badge tag-badge bg-success rounded">8+</span>
</div>

<div class="d-flex gap-2 flex-wrap mt-3">
    <!-- Standard colored badges -->
    <span class="badge bg-primary"><i class="ti ti-download me-1"></i>Primary</span>
    <span class="badge bg-secondary">Secondary</span>
    <span class="badge bg-success">Success</span>
    <span class="badge bg-danger">Danger</span>
    <span class="badge bg-warning">Warning</span>
    <span class="badge bg-info">Info</span>
    <span class="badge bg-dark">Dark</span>
</div>

<div class="d-flex gap-3 flex-wrap mt-3">
    <!-- Icon buttons with animated badge indicators -->
    <a class="position-relative bg-primary p-2 d-flex-center b-r-10" href="#">
        <i class="ti ti-shopping-cart f-s-18"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-primary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-secondary p-2 d-flex-center b-r-10" href="#">
        <i class="ti ti-line-dashed f-s-18"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-secondary rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-success p-2 d-flex-center b-r-10" href="#">
        <i class="ti ti-speakerphone f-s-18"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-success rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-danger p-2 d-flex-center b-r-10" href="#">
        <i class="ti ti-mail f-s-18"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>

    <a class="position-relative bg-dark p-2 d-flex-center b-r-10" href="#">
        <i class="ti ti-moon-filled f-s-18"></i>
        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-dark rounded-circle animate__animated animate__fadeIn animate__infinite animate__fast"></span>
    </a>
</div>

<div class="d-flex gap-4 flex-wrap mt-3">
    <!-- Buttons with notification badges -->
    <button class="btn btn-primary" type="button">
        Notifications <span class="badge bg-light-white badge-notification">4</span>
    </button>

    <button class="btn btn-success position-relative" type="button">
        Inbox
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-white badge-notification">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>

    <button class="btn btn-danger position-relative" type="button">
        Unread
        <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-white badge-notification">
            <i class="ti ti-bell-ringing"></i>
        </span>
    </button>

    <button class="btn btn-outline-warning position-relative" type="button">
        Inbox
        <span class="badge rounded-pill bg-warning badge-notification">
            99+
            <span class="visually-hidden">unread messages</span>
        </span>
    </button>

    <button class="btn btn-info position-relative f-s-14" type="button">
        <b>50%</b> Off
        <span class="position-absolute top-0 start-100 translate-middle bg-info b-r-6 badge-notification p-1 f-s-12">
            New
        </span>
    </button>

    <button class="btn btn-dark position-relative" type="button">
        <b>1</b> missed call
        <span class="position-absolute top-0 start-100 translate-middle p-2 bg-dark border border-light rounded-circle animate__animated animate__fadeIn animate__infinite animate__slower">
            <span class="visually-hidden">Busy</span>
        </span>
    </button>
</div>

Text

- .text-primary - .text-secondary - .text-success - .text-danger - .text-warning - .text-info - .text-light - .text-dark

- .txt-bg-primary - .txt-bg-secondary - .txt-bg-success - .txt-bg-danger - .txt-bg-warning - .txt-bg-info - .txt-bg-light - .txt-bg-dark

-link-primary -link-secondary -link-success -link-danger -link-warning - link-info -link-light -link-dark

<!-- Text Colors -->
<div class="d-flex flex-wrap gap-2 mt-3">
    <span class="text-primary p-2"> - .text-primary</span>
    <span class="text-secondary p-2"> - .text-secondary</span>
    <span class="text-success p-2"> - .text-success</span>
    <span class="text-danger p-2"> - .text-danger</span>
    <span class="text-warning p-2"> - .text-warning</span>
    <span class="text-info p-2"> - .text-info</span>
    <span class="text-light p-2"> - .text-light</span>
    <span class="text-dark p-2"> - .text-dark</span>
</div>

<!-- Text Background Colors -->
<div class="d-flex flex-wrap gap-2 mt-3">
    <span class="txt-bg-primary p-2 b-r-22"> - .txt-bg-primary</span>
    <span class="txt-bg-secondary p-2 b-r-22"> - .txt-bg-secondary</span>
    <span class="txt-bg-success p-2 b-r-22"> - .txt-bg-success</span>
    <span class="txt-bg-danger p-2 b-r-22"> - .txt-bg-danger</span>
    <span class="txt-bg-warning p-2 b-r-22"> - .txt-bg-warning</span>
    <span class="txt-bg-info p-2 b-r-22"> - .txt-bg-info</span>
    <span class="txt-bg-light text-dark p-2 b-r-22"> - .txt-bg-light</span>
    <span class="txt-bg-dark p-2 b-r-22"> - .txt-bg-dark</span>
</div>

<!-- Text Links -->
<div class="d-flex flex-wrap gap-2 mt-3">
    <span class="p-2">-<a class="text-decoration-underline link-primary" href="#">link-primary</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-secondary" href="#">link-secondary</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-success" href="#">link-success</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-danger" href="#">link-danger</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-warning" href="#">link-warning</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-info" href="#">link-info</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-light" href="#">link-light</a></span>
    <span class="p-2">-<a class="text-decoration-underline link-dark" href="#">link-dark</a></span>
</div>

Font Weight

- Font weightf-fw-300*

- Font weightf-fw-400*

- Font weightf-fw-500*

- Font weightf-fw-600*

- Font weightf-fw-700*

- Font weightf-fw-800*

- Font weightf-fw-900*

<!-- Font Weight Examples -->
<div class="p-2">- Font weight <span class="f-fw-300 ms-2">f-fw-300* </span></div>
<div class="p-2">- Font weight <span class="f-fw-400 ms-2">f-fw-400* </span></div>
<div class="p-2">- Font weight <span class="f-fw-500 ms-2">f-fw-500* </span></div>
<div class="p-2">- Font weight <span class="f-fw-600 ms-2">f-fw-600* </span></div>
<div class="p-2">- Font weight <span class="f-fw-700 ms-2">f-fw-700* </span></div>
<div class="p-2">- Font weight <span class="f-fw-800 ms-2">f-fw-800* </span></div>
<div class="p-2">- Font weight <span class="f-fw-900 ms-2">f-fw-900* </span></div>

Tabs

<!-- Tabs Examples -->

<ul class="nav nav-tabs line-tabs-primary" id="basicLinesTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="linesTabData1" data-bs-toggle="tab" data-bs-target="#linesTabData1-pane" type="button" role="tab" aria-controls="linesTabData1" aria-selected="true">Tab 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="linesTabData2" data-bs-toggle="tab" data-bs-target="#linesTabData2-pane" type="button" role="tab" aria-controls="linesTabData2" aria-selected="false">Tab 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="linesTabData3" data-bs-toggle="tab" data-bs-target="#linesTabData3-pane" type="button" role="tab" aria-controls="linesTabData3" aria-selected="false">Tab 3</button>
    </li>
</ul>

<ul class="nav nav-tabs app-tabs-primary" id="basicTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tabData1" data-bs-toggle="tab" data-bs-target="#tabData1-pane" type="button" role="tab" aria-controls="tabData1" aria-selected="true">Tab 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabData2" data-bs-toggle="tab" data-bs-target="#tabData2-pane" type="button" role="tab" aria-controls="tabData2" aria-selected="false">Tab 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabData3" data-bs-toggle="tab" data-bs-target="#tabData3-pane" type="button" role="tab" aria-controls="tabData3" aria-selected="false">Tab 3</button>
    </li>
</ul>

<ul class="nav nav-tabs tab-outline-secondary" id="basicOutlineTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabOutlineData1" data-bs-toggle="tab" data-bs-target="#tabOutlineData1-pane" type="button" role="tab" aria-controls="tabOutlineData1" aria-selected="false">Tab 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tabOutlineData2" data-bs-toggle="tab" data-bs-target="#tabOutlineData2-pane" type="button" role="tab" aria-controls="tabOutlineData2" aria-selected="true">Tab 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabOutlineData3" data-bs-toggle="tab" data-bs-target="#tabOutlineData3-pane" type="button" role="tab" aria-controls="tabOutlineData3" aria-selected="false">Tab 3</button>
    </li>
</ul>

<ul class="nav nav-tabs tab-light-success mb-0" id="basicLightTabs" role="tablist">
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabLightData1" data-bs-toggle="tab" data-bs-target="#tabLightData1-pane" type="button" role="tab" aria-controls="tabLightData1" aria-selected="false">Tab 1</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link" id="tabLightData2" data-bs-toggle="tab" data-bs-target="#tabLightData2-pane" type="button" role="tab" aria-controls="tabLightData2" aria-selected="false">Tab 2</button>
    </li>
    <li class="nav-item" role="presentation">
        <button class="nav-link active" id="tabLightData3" data-bs-toggle="tab" data-bs-target="#tabLightData3-pane" type="button" role="tab" aria-controls="tabLightData3" aria-selected="true">Tab 3</button>
    </li>
</ul>

Massage Variant

Missed video call

Tab to call back

Voice call

05 Min

Missed voice call

Tab to call back

Voice call

05 Min

Project_Proposal.pdf

2.3MB

Team_Meeting_Notes.docx

1.1MB

Sales_Report_Q1.xlsx

850KB

App_Design.sketch

4.7MB

Wireframe_UI.fig

3.5MB

05:12

Product launch teaser

https://www.youtube.com/watch?v=dQw4w9WgXcQ

Simple Massage

Jerry Smith
09:30AM

Hi! Just wanted to confirm our meeting is still on at 2 PM?
Jerry Smith
09:30AM

Yes, absolutely. I'll be there on time with the presentation ready.

Group Massage

Jerry Smith
09:15AM

Hey team! Just a quick reminder, we have a call at 3 PM to review MVP features.
Emma Johnson
09:18AM

Thanks for the reminder! I’ve updated the task list for the meeting.
Liam Carter
09:21AM

I’ll join from the airport lounge, so my connection might be a bit spotty.

Massage With Options

Jerry Smith
09:30AM
Good morning! I hope you're having a great day so far.
- Daniel
  
  Noah
  
  LM
  
  Liam
  
  Mason
- pin
  
  Mark As Unread
  
  Archive
  
  Add To Favourites

Form Elements

Static Text

Hello !... This is static text

Default Input

Password

URL

Telephone

Number

Maximum Length

Date & Time

Date

Time

File

Textarea

Connect, share, and vibe together — ChatVibe is where conversations come alive.

Elements Page

Buttons

Avatars

Badges

Text

Font Size

Font Weight

Tabs

Massage Variant

Missed video call

Voice call

Missed voice call

Voice call

Project_Proposal.pdf

Team_Meeting_Notes.docx

Sales_Report_Q1.xlsx

App_Design.sketch

Wireframe_UI.fig

Simple Massage

Hi! Just wanted to confirm our meeting is still on at 2 PM?

Yes, absolutely. I'll be there on time with the presentation ready.

Group Massage

Hey team! Just a quick reminder, we have a call at 3 PM to review MVP features.

Thanks for the reminder! I’ve updated the task list for the meeting.

I’ll join from the airport lounge, so my connection might be a bit spotty.

Massage With Options

Good morning! I hope you're having a great day so far.

Form Elements

Pages

Support

Contact Us

Address

Email

Contact No.

Download

Download on the

Download on the

Elements Page

Buttons

Avatars

Badges

Text

Font Size

Font Weight

Tabs

Massage Variant

Missed video call

Voice call

Missed voice call

Voice call

Project_Proposal.pdf

Team_Meeting_Notes.docx

Sales_Report_Q1.xlsx

App_Design.sketch

Wireframe_UI.fig

Simple Massage

Hi! Just wanted to confirm our meeting is still on at 2 PM?

Yes, absolutely. I'll be there on time with the presentation ready.

Group Massage

Hey team! Just a quick reminder, we have a call at 3 PM to review MVP features.

Thanks for the reminder! I’ve updated the task list for the meeting.

I’ll join from the airport lounge, so my connection might be a bit spotty.

Massage With Options

Good morning! I hope you're having a great day so far.

Daniel

Noah

Liam

Mason

Form Elements

Pages

Support

Contact Us

Address

Email

Contact No.

Download

Download on the

Download on the