Close Button

<button type="button" class="btn-close" aria-label="Close"></button>

<div class="flex gap-4 items-center">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

<div data-ui-theme="dark" class="bg-dark p-4 rounded-md flex gap-4">
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close" disabled aria-label="Close"></button>
</div>

<div class="alert alert-info alert-dismissible fade show mb-0" role="alert">
  <i class="bi bi-info-circle-fill" aria-hidden="true"></i> The venue is a short walk from the station and fully accessible.
  <button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>

<div id="toast-901" class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="../assets/img/avatar-5.svg" class="rounded-md me-2" width="20" height="20" alt="Elena Novak"><strong class="me-auto">Elena Novak</strong><small class="text-muted">yesterday</small>
    <button type="button" class="btn-close" data-ui-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Thousands of attendees already trust us, and we work hard to keep it that way.
  </div>
</div>
<button type="button" class="btn btn-outline-secondary btn-sm mt-2" data-demo-toast="#toast-901">Show toast again</button>

<div class="modal static block" tabindex="-1" aria-labelledby="modal-title-902">
  <div class="modal-dialog m-0">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title-902">Rename file</h5>
        <button type="button" class="btn-close" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">Every session is recorded, so you can catch up on anything you missed.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light border">Cancel</button>
        <button type="button" class="btn btn-primary">Rename</button>
      </div>
    </div>
  </div>
</div>

<div class="card relative" style="max-width: 22rem;">
  <div class="card-body pe-12">
    <h6 class="card-title"><i class="bi bi-lightbulb-fill" aria-hidden="true"></i> Quick tip</h6>
    <p class="card-text small mb-0">Our team has done this many times, so you never have to guess.</p>
  </div>
  <button type="button" class="btn-close absolute top-0 end-0 m-2" aria-label="Dismiss tip"></button>
</div>

<div class="flex flex-wrap gap-2">
  <span class="ca-chip">Isla Lindqvist
  <button type="button" class="btn-close" aria-label="Remove Isla Lindqvist"></button>
  </span><span class="ca-chip">Omar Haddad
  <button type="button" class="btn-close" aria-label="Remove Omar Haddad"></button>
  </span><span class="ca-chip">Ruby Harlow
  <button type="button" class="btn-close" aria-label="Remove Ruby Harlow"></button>
  </span>
</div>

<div class="flex gap-6 items-center">
  <button type="button" class="btn-close ca-close-sm" aria-label="Close small"></button>
  <button type="button" class="btn-close" aria-label="Close"></button>
  <button type="button" class="btn-close ca-close-lg" aria-label="Close large"></button>
</div>

<button class="btn btn-primary" type="button" data-ui-toggle="offcanvas" data-ui-target="#offcanvas-903" aria-controls="offcanvas-903"><i class="bi bi-funnel-fill" aria-hidden="true"></i> Open filters</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvas-903" aria-labelledby="offcanvas-label-904">
  <div class="offcanvas-header border-b">
    <h5 class="offcanvas-title" id="offcanvas-label-904">Filters</h5>
    <button type="button" class="btn-close" data-ui-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <p>Three days of keynotes, hands-on workshops and evening meetups.</p>
  </div>
</div>

<div class="flex flex-wrap gap-4">
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1780413462971-e245268a13d2?auto=format&fit=crop&w=800&h=800&q=70" alt="Upload 1" class="rounded-md border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-full p-1 absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 1"></button>
  </div>
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1762968269894-1d7e1ce8894e?auto=format&fit=crop&w=800&h=800&q=70" alt="Upload 2" class="rounded-md border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-full p-1 absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 2"></button>
  </div>
  <div class="relative">
    <img src="https://images.unsplash.com/photo-1770097286213-6d6fc60f4cdf?auto=format&fit=crop&w=800&h=800&q=70" alt="Upload 3" class="rounded-md border" width="96" height="96">
    <button type="button" class="btn-close bg-white rounded-full p-1 absolute top-0 end-0 m-1 shadow-sm" style="font-size: .6rem;" aria-label="Remove image 3"></button>
  </div>
</div>

<ul class="list-group" style="max-width: 380px;">
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> how-to-pitch-a-talk-that-gets-accepted.pdf</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> behind-the-scenes-building-the-stage.png</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
  <li class="list-group-item flex justify-between items-center"><span><i class="bi bi-paperclip" aria-hidden="true"></i> five-things-we-learned-this-year.pdf</span><button type="button" class="btn-close" aria-label="Remove attachment"></button></li>
</ul>

<div class="input-group" style="max-width: 360px;">
  <span class="input-group-text bg-transparent"><i class="bi bi-search" aria-hidden="true"></i></span><input type="search" class="form-control border-s-0 border-e-0" id="clear-search-905" value="release" aria-label="Search"><span class="input-group-text bg-transparent">
  <button type="button" class="btn-close" aria-label="Clear search"></button>
  </span>
</div>

<div class="border rounded-md shadow-sm" style="max-width: 360px;">
  <div class="flex items-center gap-2 p-4 border-b">
    <strong class="me-auto">Notifications</strong><a href="#" class="small">Mark all read</a>
    <button type="button" class="btn-close" aria-label="Close notifications"></button>
  </div>
  <div class="p-4 small text-muted">
    Group tickets include a private meeting room for your team.
  </div>
</div>

<div class="flex items-center gap-4 border rounded-md p-2" style="max-width: 420px;">
  <img src="../assets/img/product-8.svg" alt="Student pass" class="rounded-md" width="56" height="56">
  <div class="grow">
    <div class="font-semibold small">
      Student pass
    </div>
    <div class="small text-muted">
      Qty 1 &middot; $161.99
    </div>
  </div>
  <button type="button" class="btn-close" aria-label="Remove Student pass from cart"></button>
</div>

<div class="flex flex-col gap-2">
  <div class="text-bg-primary rounded-md p-4 flex justify-between" data-ui-theme="dark">
    <span>Early bird tickets save you up to forty percent until the end of the month.</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
  <div class="text-bg-success rounded-md p-4 flex justify-between" data-ui-theme="dark">
    <span>Payment received.</span>
    <button type="button" class="btn-close" aria-label="Close"></button>
  </div>
</div>

<button type="button" class="btn btn-light border inline-flex items-center gap-2"><span class="btn-close" style="font-size: .65rem;" aria-hidden="true"></span> Close</button>

<div class="flex flex-wrap items-center gap-2">
  <span class="small text-muted me-1">Active filters:</span><span class="badge rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center gap-2 py-2 px-4 font-normal">Meetup
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Meetup filter"></button>
  </span><span class="badge rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center gap-2 py-2 px-4 font-normal">Rating 4+
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Rating 4+ filter"></button>
  </span><span class="badge rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center gap-2 py-2 px-4 font-normal">Free shipping
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Free shipping filter"></button>
  </span><span class="badge rounded-full bg-primary-subtle text-primary-emphasis inline-flex items-center gap-2 py-2 px-4 font-normal">Edinburgh
  <button type="button" class="btn-close" style="font-size: .5rem;" aria-label="Remove Edinburgh filter"></button>
  </span><a href="#" class="small ms-1">Clear all</a>
</div>

<div class="alert alert-dismissible fade show rounded-none border-0 text-center mb-0 ca-promo" role="alert" data-ui-theme="dark">
  <i class="bi bi-stars" aria-hidden="true"></i> <strong>40% off</strong> all yearly plans this week. <a href="#" class="alert-link">Claim offer</a>
  <button type="button" class="btn-close" data-ui-dismiss="alert" aria-label="Close"></button>
</div>

<button type="button" class="btn btn-primary" data-ui-toggle="modal" data-ui-target="#modal-906">Open dialog</button>
<div class="modal fade" id="modal-906" tabindex="-1" aria-labelledby="modal-title-907" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-title-907">How to choose the right ticket</h5>
        <button type="button" class="btn-close" data-ui-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p class="mb-0">We listen first, then build a plan around what you actually need. We measure success by how many attendees come back and tell their friends.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-ui-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Got it</button>
      </div>
    </div>
  </div>
</div>