Tailwind CSS Badges - Flowbite

Use Tailwind CSS badges as elements to show counts or labels separately or inside other components

The badge component can be used to complement other elements such as buttons or text elements as a label or to show the count of a given data, such as the number of comments for an article or how much time has passed by since a comment has been made.

Alternatively, badges can also be used as standalone elements that link to a certain page by using the anchor tag instead of a span element.

Default badge #

Use the following badge elements to indicate counts or labels inside or outside components.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      

Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">Default</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300">Dark</span>
<span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-900 dark:text-red-300">Red</span>
<span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-900 dark:text-green-300">Green</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300">Purple</span>
<span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-pink-900 dark:text-pink-300">Pink</span>

Large badges #

Use the text-sm utility class and increase the paddings to create a larger variant of the badges.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      

Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-blue-100 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-900 dark:text-blue-300">Default</span>
<span class="bg-gray-100 text-gray-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-300">Dark</span>
<span class="bg-red-100 text-red-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-900 dark:text-red-300">Red</span>
<span class="bg-green-100 text-green-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-900 dark:text-green-300">Green</span>
<span class="bg-yellow-100 text-yellow-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
<span class="bg-indigo-100 text-indigo-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
<span class="bg-purple-100 text-purple-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-purple-900 dark:text-purple-300">Purple</span>
<span class="bg-pink-100 text-pink-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-pink-900 dark:text-pink-300">Pink</span>

Bordered badge #

This example can be used to add a border accent to the badge component.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      

Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400">Default</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-gray-400 border border-gray-500">Dark</span>
<span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-red-400 border border-red-400">Red</span>
<span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-green-400 border border-green-400">Green</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-yellow-300 border border-yellow-300">Yellow</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400">Indigo</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-purple-400 border border-purple-400">Purple</span>
<span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-pink-400 border border-pink-400">Pink</span>

Pills badge #

Use this example to make the corners even more rounded-sm like pills for the badge component.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      

Default
Dark
Red
Green
Yellow
Indigo
Purple
Pink
<span class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-blue-900 dark:text-blue-300">Default</span>
<span class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-gray-700 dark:text-gray-300">Dark</span>
<span class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-red-900 dark:text-red-300">Red</span>
<span class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-green-900 dark:text-green-300">Green</span>
<span class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-yellow-900 dark:text-yellow-300">Yellow</span>
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-indigo-900 dark:text-indigo-300">Indigo</span>
<span class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300">Purple</span>
<span class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-full dark:bg-pink-900 dark:text-pink-300">Pink</span>

Badges as links #

You can also use badges as anchor elements to link to another page.

        
           Edit on GitHub
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
            Loading...
        
                      Copy to clipboard
                      
Badge link
Badge link
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-xs font-semibold me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">Badge link</a>
<a href="#" class="bg-blue-100 hover:bg-blue-200 text-blue-800 text-sm font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400 inline-flex items-center justify-center">Badge link</a>

Badges with icon #

You can also use SVG icons inside the badge elements.

        
           Edit on GitHub
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
            Loading...
        
                      Copy to clipboard
                      
3 days ago

2 minutes ago

<span class="bg-gray-100 text-gray-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-sm me-2 dark:bg-gray-700 dark:text-gray-400 border border-gray-500 ">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/>
</svg>
3 days ago
</span>
<span class="bg-blue-100 text-blue-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded-sm dark:bg-gray-700 dark:text-blue-400 border border-blue-400">
<svg class="w-2.5 h-2.5 me-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/>
</svg>
2 minutes ago
</span>

Notification badge #

Use the following example to show a badge inside of a button component.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      


<button type="button" class="relative inline-flex items-center p-3 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
<path d="m10.036 8.278 9.258-7.79A1.979 1.979 0 0 0 18 0H2A1.987 1.987 0 0 0 .641.541l9.395 7.737Z"/>
<path d="M11.241 9.817c-.36.275-.801.425-1.255.427-.428 0-.845-.138-1.187-.395L0 2.6V14a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.5l-8.759 7.317Z"/>
</svg>
<span class="sr-only">Notifications</span>
  <div class="absolute inline-flex items-center justify-center w-6 h-6 text-xs font-bold text-white bg-red-500 border-2 border-white rounded-full -top-2 -end-2 dark:border-gray-900">20</div>
</button>

Button with badge #

Use this example to add a badge inside a button component for a count indicator.

        
           Edit on GitHub
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
            Loading...
        
                      Copy to clipboard
                      
<button type="button" class="inline-flex items-center px-5 py-2.5 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
Messages
<span class="inline-flex items-center justify-center w-4 h-4 ms-2 text-xs font-semibold text-blue-800 bg-blue-200 rounded-full">
2
</span>
</button>

Badge with icon only #

Alternatively you can also use badges which indicate only a SVG icon.

        
           Edit on GitHub
        
              Toggle full screen
              
              Toggle tablet view
              
            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
            Loading...
        
                      Copy to clipboard
                      
Icon description

Icon description

Icon description

Icon description

<span class="inline-flex items-center justify-center w-6 h-6 me-2 text-sm font-semibold text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-2.5 h-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 12">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5.917 5.724 10.5 15 1.5"/>
</svg>
<span class="sr-only">Icon description</span>
</span>
<span class="inline-flex items-center justify-center w-6 h-6 me-2 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-gray-700 dark:text-blue-400">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path fill="currentColor" d="m18.774 8.245-.892-.893a1.5 1.5 0 0 1-.437-1.052V5.036a2.484 2.484 0 0 0-2.48-2.48H13.7a1.5 1.5 0 0 1-1.052-.438l-.893-.892a2.484 2.484 0 0 0-3.51 0l-.893.892a1.5 1.5 0 0 1-1.052.437H5.036a2.484 2.484 0 0 0-2.48 2.481V6.3a1.5 1.5 0 0 1-.438 1.052l-.892.893a2.484 2.484 0 0 0 0 3.51l.892.893a1.5 1.5 0 0 1 .437 1.052v1.264a2.484 2.484 0 0 0 2.481 2.481H6.3a1.5 1.5 0 0 1 1.052.437l.893.892a2.484 2.484 0 0 0 3.51 0l.893-.892a1.5 1.5 0 0 1 1.052-.437h1.264a2.484 2.484 0 0 0 2.481-2.48V13.7a1.5 1.5 0 0 1 .437-1.052l.892-.893a2.484 2.484 0 0 0 0-3.51Z"/>
<path fill="#fff" d="M8 13a1 1 0 0 1-.707-.293l-2-2a1 1 0 1 1 1.414-1.414l1.42 1.42 5.318-3.545a1 1 0 0 1 1.11 1.664l-6 4A1 1 0 0 1 8 13Z"/>
</svg>
<span class="sr-only">Icon description</span>
</span>
<span class="inline-flex items-center justify-center w-6 h-6 me-2 text-sm font-semibold text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/>
</svg>
<span class="sr-only">Icon description</span>
</span>
<span class="inline-flex items-center justify-center w-6 h-6 me-2 text-sm font-semibold text-blue-800 bg-blue-100 rounded-full dark:bg-gray-700 dark:text-blue-400">
<svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
</svg>
<span class="sr-only">Icon description</span>
</span>

Chips (dismissible badges) #

Use the data-dismiss-target data attribute to dismiss the current badge where the value is the id of the target element using a transition animation.

        
          
            
           Edit on GitHub
        
      

              Toggle full screen
              

              Toggle tablet view
              

            Toggle mobile view
            
Toggle RTL mode
Toggle dark mode

	<form action="" method="POST" style="all:unset;float:left;">
		<input type="hidden" name="URL_Adresi" value="https://flowbite.com/docs/components/badge/"/>
		<select name="DNS_Adresi" onchange="this.form.submit()" style="all:unset;border:1px solid silver;border-width:0;margin:0px 0px 0px 20px;background-color:transparent;color:black;line-height:20px;text-align:left;padding:0 5px;font-size:14px;">
			<option value="0" selected="true">Otomatik - 108.157.52.52</option>
			<option value="11" >CloudFlare DNS</option>
			<option value="12" >T&#252;rk Telekom DNS</option>
			<option value="13" >Google DNS</option>
			<option value="14" >Open DNS</option>
		</select>
	</form>	<a style="all:unset;float:right;text-align:right;font-size:14px;padding-right:20px;color:black;text-decoration:none;cursor:pointer;line-height:20px" href="https://www.oszar.com/">OSZAR &#187;</a>
</div>
<div style="all:unset;float:left;clear:both;display:table;height:40px;"></div></body>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-PNFHQ1FTKQ"></script>
<script>
	window.dataLayer = window.dataLayer || [];
	function gtag(){dataLayer.push(arguments);}
	gtag('js', new Date());
	gtag('config', 'G-PNFHQ1FTKQ');
</script></html>" frameborder="0">
            
                
                
            
            Loading...
        

                  
                

                      Copy to clipboard
                      


Default



Dark



Red



Green



Yellow



Indigo



Purple



Pink


<span id="badge-dismiss-default" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-blue-800 bg-blue-100 rounded-sm dark:bg-blue-900 dark:text-blue-300">
Default
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-blue-400 bg-transparent rounded-xs hover:bg-blue-200 hover:text-blue-900 dark:hover:bg-blue-800 dark:hover:text-blue-300" data-dismiss-target="#badge-dismiss-default" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-dark" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-gray-800 bg-gray-100 rounded-sm dark:bg-gray-700 dark:text-gray-300">
Dark
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-gray-400 bg-transparent rounded-xs hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-gray-300" data-dismiss-target="#badge-dismiss-dark" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-red" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-red-800 bg-red-100 rounded-sm dark:bg-red-900 dark:text-red-300">
Red
<button type="button" class="inline-flex items-center p-1  ms-2 text-sm text-red-400 bg-transparent rounded-xs hover:bg-red-200 hover:text-red-900 dark:hover:bg-red-800 dark:hover:text-red-300" data-dismiss-target="#badge-dismiss-red" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-green" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-green-800 bg-green-100 rounded-sm dark:bg-green-900 dark:text-green-300">
Green
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-green-400 bg-transparent rounded-xs hover:bg-green-200 hover:text-green-900 dark:hover:bg-green-800 dark:hover:text-green-300" data-dismiss-target="#badge-dismiss-green" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-yellow" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-yellow-800 bg-yellow-100 rounded-sm dark:bg-yellow-900 dark:text-yellow-300">
Yellow
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-yellow-400 bg-transparent rounded-xs hover:bg-yellow-200 hover:text-yellow-900 dark:hover:bg-yellow-800 dark:hover:text-yellow-300" data-dismiss-target="#badge-dismiss-yellow" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-indigo" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-indigo-800 bg-indigo-100 rounded-sm dark:bg-indigo-900 dark:text-indigo-300">
Indigo
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-indigo-400 bg-transparent rounded-xs hover:bg-indigo-200 hover:text-indigo-900 dark:hover:bg-indigo-800 dark:hover:text-indigo-300" data-dismiss-target="#badge-dismiss-indigo" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-purple" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-purple-800 bg-purple-100 rounded-sm dark:bg-purple-900 dark:text-purple-300">
Purple
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-purple-400 bg-transparent rounded-xs hover:bg-purple-200 hover:text-purple-900 dark:hover:bg-purple-800 dark:hover:text-purple-300" data-dismiss-target="#badge-dismiss-purple" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>
<span id="badge-dismiss-pink" class="inline-flex items-center px-2 py-1 me-2 text-sm font-medium text-pink-800 bg-pink-100 rounded-sm dark:bg-pink-900 dark:text-pink-300">
Pink
<button type="button" class="inline-flex items-center p-1 ms-2 text-sm text-pink-400 bg-transparent rounded-xs hover:bg-pink-200 hover:text-pink-900 dark:hover:bg-pink-800 dark:hover:text-pink-300" data-dismiss-target="#badge-dismiss-pink" aria-label="Remove">
<svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
</svg>
<span class="sr-only">Remove badge</span>
</button>
</span>

Get more updates...

Do you want to get notified when a new component is added to Flowbite? Sign up for our newsletter and you'll be among the first to find out about new features, components, versions, and tools.

By subscribing, you agree with ConvertKit's Terms of Service and Privacy Policy.