TailwindTemplates

Theme

Orbit

Orbit by Kiwi.com. Open source design system for your next travel project.

Orbit Button

Orbit Button Rounded

Copied!

                    
                         <button type="submit" class="inline-flex items-center justify-center space-x-2 border border-transparent text-sm font-medium rounded-full w-12 h-12 text-white bg-green-600 hover:bg-green-700 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
  <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
  <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
</svg>
</button>
Orbit Button

Orbit Subtle Button

Copied!

                    
                         <button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-green-600 hover:text-green-700 bg-green-50 hover:bg-green-100 transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" />
</svg>
  <div>Button</div>
</button>
Orbit Button

Orbit Button Icon

Copied!

                    
                         <!-- left -->
<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <div>Default button</div>
</button>

<!-- Right -->
<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <div>Default button</div>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  </svg>
</button>




<!-- Both sides -->

<button type="submit" class="inline-flex items-center justify-center space-x-2 py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <div>Default button</div>
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
  </svg>
</button>
Orbit Button

Orbit Default Button

Copied!

                    
                         <button type="submit" class="inline-flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded text-white bg-green-600 hover:bg-green-700 transition-colors">Default button</button>
Orbit Badge

Orbit Badges: Success

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-green-900 bg-green-100 border-green-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-green-600 border-green-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
Orbit Badge

Orbit Badges: Critical

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-red-700 bg-red-100 border-red-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-red-600 border-red-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
Orbit Badge

Orbit Badges: Warning

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-yellow-700 bg-yellow-100 border-yellow-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-yellow-700 bg-yellow-100 border-yellow-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-yellow-700 bg-yellow-100 border-yellow-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-yellow-700 bg-yellow-100 border-yellow-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-yellow-600 border-yellow-600">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-yellow-600 border-yellow-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-yellow-600 border-yellow-600">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-yellow-600 border-yellow-600">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
Orbit Badge

Orbit Badges: information

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-blue-900 bg-blue-100 border-blue-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-blue-900 bg-blue-100 border-blue-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-blue-900 bg-blue-100 border-blue-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-blue-900 bg-blue-100 border-blue-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-blue-700 border-blue-700">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-blue-700 border-blue-700">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-blue-700 border-blue-700">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-blue-700 border-blue-700">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
Orbit Badge

Orbit Badges: neutral

Copied!

                    
                         <!-- Light -->
<div class="flex items-start space-x-3">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border bg-white border-gray-300">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border bg-white border-gray-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>  
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border bg-white border-gray-300">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border bg-white border-gray-300">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>

<!-- Dark -->
<div class="flex items-start space-x-3 mt-6">
    <!-- Plain label -->
    <div class="rounded-full py-1 px-4 font-medium border text-white bg-black border-black">
        Label
    </div>

    <!-- Icon label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-black border-black">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="mr-1">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg> 
        Label
    </div>

    <!-- Information label -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-black border-black">
        Label
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="ml-2">
            <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
        </svg>
    </div>

    <!-- Icon only -->
    <div class="flex rounded-full py-1 px-4 font-medium border text-white bg-black border-black">
        <svg width="22" height="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <path d="M7.4558 17.3483a.8333.8333 0 0 1 .2309 1.1559l-2.0834 3.125a.8334.8334 0 0 1-1.3866-.925L6.3 17.5792a.8333.8333 0 0 1 1.1558-.2309zM19.77 20.7042a.8334.8334 0 1 1-1.3867.925L16.3 18.5042a.8334.8334 0 1 1 1.3867-.925l2.0833 3.125zM18.66 14.5a1.8484 1.8484 0 0 1-1.4908 1.825 28.6725 28.6725 0 0 1-5.1759.675 28.64 28.64 0 0 1-5.1666-.6733 1.8583 1.8583 0 0 1-1.5-1.8267V5.7592C5.329 3.684 7.0107 2.0023 9.0858 2h5.815c2.0752.0023 3.7569 1.684 3.7592 3.7592V14.5zM12.8267 3.875v4.6025a.2092.2092 0 0 0 .2.2083 20.6275 20.6275 0 0 1 3.7116.4675.2083.2083 0 0 0 .255-.2033V5.7592c-.0009-1.1553-.9372-2.0916-2.0925-2.0925H13.035a.2083.2083 0 0 0-.2083.2083zM6.9933 5.7592V8.95a.2083.2083 0 0 0 .255.2033 20.6275 20.6275 0 0 1 3.7117-.4675.2092.2092 0 0 0 .2-.2083V3.875a.2083.2083 0 0 0-.2083-.2083H9.0858c-1.1552.0009-2.0915.9372-2.0925 2.0925zm1.4584 7.0741a.8333.8333 0 1 0 0-1.6666h-1.25a.4167.4167 0 0 0-.4167.4166v.8334c0 .23.1865.4166.4167.4166h1.25zm5.4166 2.3767v-1.5433a.2108.2108 0 0 0-.2083-.2084h-3.3333a.2108.2108 0 0 0-.2084.2084v1.5425c0 .1055.0787.1944.1834.2075.561.0742 1.1258.116 1.6916.125a14.6717 14.6717 0 0 0 1.6917-.1242.2091.2091 0 0 0 .1833-.2075zm2.9167-2.3767a.4167.4167 0 0 0 .4167-.4166v-.8334a.4167.4167 0 0 0-.4167-.4166h-1.25a.8333.8333 0 1 0 0 1.6666h1.25z"></path>
        </svg>
    </div>
</div>
Orbit Alert

Orbit Alert

Copied!

                    
                         <!-- Information -->
<div class="p-4 text-blue-900 bg-blue-100 border border-blue-200 rounded-md">
    <div class="flex justify-between flex-wrap">
        <div class="w-0 flex-1 flex">
            <div class="mr-3 pt-1">
                <svg width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M14.1667 17h-3.3334c-.5 0-.8333-.3146-.8333-.7865 0-.472.3333-.7865.8333-.7865H11.5c.0833 0 .1667-.0787.1667-.1573v-3.5394c0-.0786-.0834-.1573-.1667-.1573h-.6667c-.5 0-.8333-.3146-.8333-.7865S10.3333 10 10.8333 10h.8334c.9166 0 1.6666.7079 1.6666 1.573v3.7753c0 .0787.0834.1573.1667.1573h.6667c.5 0 .8333.3146.8333.7865 0 .472-.3333.7079-.8333.7079zM12.3 6c.6933 0 1.3.6067 1.3 1.3s-.52 1.3-1.3 1.3S11 7.9933 11 7.3 11.6067 6 12.3 6zM12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2"></path>
                </svg>
            </div>
            <div>
                <h4 class="text-md leading-6 font-medium">
                    Your message - make it short & clear.
                </h4>
                <p class="text-sm">
                    Description - make it as clear as possible.
                </p>
                <div class="flex mt-3">
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-700 text-base font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:w-auto sm:text-sm">
                        Primary button
                    </button>
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-blue-200 text-base font-medium hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 sm:w-auto sm:text-sm">
                        Secondary button
                    </button>
                </div>
            </div>
        </div>
        <div>
            <button type="button" class="rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<!-- Success -->
<div class="p-4 text-green-900 bg-green-100 border border-green-200 rounded-md">
    <div class="flex justify-between flex-wrap">
        <div class="w-0 flex-1 flex">
            <div class="mr-3 pt-1">
                <svg width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M8.445 12.6675A.9.9 0 0 0 7.1424 13.91l2.5726 2.7448c.3679.3856.9884.3689 1.335-.036l5.591-7.0366a.9.9 0 0 0-1.3674-1.1705l-4.6548 5.9132a.4.4 0 0 1-.607.0252l-1.567-1.6826zM1.9995 12c0-5.5 4.5-10 10-10s10 4.5 10 10-4.5 10-10 10-10-4.5-10-10z"></path>
                </svg>
            </div>
            <div>
                <h4 class="text-md leading-6 font-medium">
                    Your message - make it short & clear.
                </h4>
                <p class="text-sm">
                    Description - make it as clear as possible.
                </p>
                <div class="flex mt-3">
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-green-700 text-base font-medium text-white hover:bg-green-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 sm:w-auto sm:text-sm">
                        Primary button
                    </button>
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-green-200 text-base font-medium hover:bg-green-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 sm:w-auto sm:text-sm">
                        Secondary button
                    </button>
                </div>
            </div>
        </div>
        <div>
            <button type="button" class="rounded-md focus:outline-none focus:ring-2 focus:ring-green-500">
                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<!-- Warning -->
<div class="p-4 text-yellow-900 bg-yellow-100 border border-yellow-200 rounded-md">
    <div class="flex justify-between flex-wrap">
        <div class="w-0 flex-1 flex">
            <div class="mr-3 pt-1">
                <svg width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z"></path>
                </svg>
            </div>
            <div>
                <h4 class="text-md leading-6 font-medium">
                    Your message - make it short & clear.
                </h4>
                <p class="text-sm">
                    Description - make it as clear as possible.
                </p>
                <div class="flex mt-3">
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-yellow-500 text-base font-medium text-white hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 sm:w-auto sm:text-sm">
                        Primary button
                    </button>
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-yellow-200 text-base font-medium hover:bg-yellow-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-400 sm:w-auto sm:text-sm">
                        Secondary button
                    </button>
                </div>
            </div>
        </div>
        <div>
            <button type="button" class="rounded-md focus:outline-none focus:ring-2 focus:ring-yellow-500">
                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>

<!-- Critical -->
<div class="p-4 text-red-900 bg-red-100 border border-red-200 rounded-md">
    <div class="flex justify-between flex-wrap">
        <div class="w-0 flex-1 flex">
            <div class="mr-3 pt-1">
                <svg width="26" height="26" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M13.6086 3.247l8.1916 15.8c.0999.2.1998.5.1998.8 0 1-.7992 1.8-1.7982 1.8H3.7188c-.2997 0-.4995-.1-.7992-.2-.7992-.5-1.1988-1.5-.6993-2.4 5.3067-10.1184 8.0706-15.385 8.2915-15.8.3314-.6222.8681-.8886 1.4817-.897.6135-.008 1.273.2807 1.6151.897zM12 18.95c.718 0 1.3-.582 1.3-1.3 0-.718-.582-1.3-1.3-1.3-.718 0-1.3.582-1.3 1.3 0 .718.582 1.3 1.3 1.3zm-.8895-10.203v5.4c0 .5.4.9.9.9s.9-.4.9-.9v-5.3c0-.5-.4-.9-.9-.9s-.9.4-.9.8z"></path>
                </svg>
            </div>
            <div>
                <h4 class="text-md leading-6 font-medium">
                    Your message - make it short & clear.
                </h4>
                <p class="text-sm">
                    Description - make it as clear as possible.
                </p>
                <div class="flex mt-3">
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:w-auto sm:text-sm">
                        Primary button
                    </button>
                    <button type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 ml-2 bg-red-200 text-base font-medium hover:bg-red-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-400 sm:w-auto sm:text-sm">
                        Secondary button
                    </button>
                </div>
            </div>
        </div>
        <div>
            <button type="button" class="rounded-md focus:outline-none focus:ring-2 focus:ring-red-500">
                <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
                    <path d="M17.6555 6.3331a.9.9 0 0 1 .001 1.2728l-4.1032 4.1085a.4.4 0 0 0 0 .5653l4.1031 4.1088a.9002.9002 0 0 1 .0797 1.1807l-.0806.092a.9.9 0 0 1-1.2728-.0009l-4.1006-4.1068a.4.4 0 0 0-.5662 0l-4.099 4.1068a.9.9 0 1 1-1.2738-1.2718l4.1027-4.1089a.4.4 0 0 0 0-.5652L6.343 7.6059a.9002.9002 0 0 1-.0796-1.1807l.0806-.092a.9.9 0 0 1 1.2728.0009l4.099 4.1055a.4.4 0 0 0 .5662 0l4.1006-4.1055a.9.9 0 0 1 1.2728-.001z"></path>
                </svg>
            </button>
        </div>
    </div>
</div>