bladewindUI

Tag

Tags, sometimes referred to as labels allow you to logically group items or indicate statuses of items. You can also use tags to list selections. They are very simple to use.

                    
                        <x-bladewind.tag label="pending"  />
                    
                


Faint Coloured

The BladewindUI tag component allows you to specify different colours. The tags by default are faint in colour with blue being the default colour. There are nine colour options to pick from.

                 

                    
                        <x-bladewind.tag label="pending" color="red" />

                        <x-bladewind.tag label="pending" color="yellow" />

                        <x-bladewind.tag label="pending" color="green" />

                        <x-bladewind.tag label="pending" color="blue" />

                        <x-bladewind.tag label="pending" color="pink" />

                        <x-bladewind.tag label="pending" color="cyan" />

                        <x-bladewind.tag label="pending" color="orange" />

                        <x-bladewind.tag label="pending" color="gray" />

                        <x-bladewind.tag label="pending" color="purple" />

                    
                


Dark Coloured

Dark colours in this case have nothing to do with dark mode. These are just a deeper shade of the tag colours. You can get darker shaded tags by setting shade="dark"

                 

                    
                        <x-bladewind.tag label="pending" shade="dark" color="red" />

                        <x-bladewind.tag label="pending" shade="dark" color="yellow" />

                        <x-bladewind.tag label="pending" shade="dark" color="green" />

                        <x-bladewind.tag label="pending" shade="dark" color="blue" />

                        <x-bladewind.tag label="pending" shade="dark" color="pink" />

                        <x-bladewind.tag label="pending" shade="dark" color="cyan" />

                        <x-bladewind.tag label="pending" shade="dark" color="orange" />

                        <x-bladewind.tag label="pending" shade="dark" color="gray" />

                        <x-bladewind.tag label="pending" shade="dark" color="purple" />
                    
                



With Close Icons

Tags can also have close icons. That will be useful if you use tags to display user selections and want a way to remove a user’s selection from the list. By default tags do not show the close icon. To activate close icons, set can_close="true". The default action when the close icon is clicked is to remove the tag that was clicked.

 

                    
                        <x-bladewind.tag label="pending" 
                            can_close="true" />

                        <x-bladewind.tag label="pending" 
                            can_close="true" 
                            color="pink" />
                    
                

The default action when the close icon is clicked is to remove the tag that was clicked. To run your own code when the close icon is clicked, provide a javascript function to the onclick attribute. You may need to use the id attribute to provide unique identifiers for your tags. By default each tag has a random generated id prefixed with bw- to prevent numeric only IDs from breaking. You can turn off the prefixing of IDs by setting add_id_prefix="false"

 

                
                    <x-bladewind.tag 
                        label="marketing" 
                        can_close="true" 
                        add_id_prefix="false"
                        id="a1001" 
                        onclick="alert('you clicked on '+ dom_el('#a1001').innerText)" />
                    
                    <x-bladewind.tag 
                        label="accounting" 
                        can_close="true" 
                        color="pink" 
                        class="a1002" 
                        onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
                
            



Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Tag component.

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
label blank The text to display on the tag.
color blue There are nine colors to choose from.
red yellow green blue pink cyan purple gray orange
shade faint Determines if the tags should have a faint or darker color shade.
faint dark
can_close false Determines if the tag should display a close icon or not. The value should be passed as a string, not boolean.
true false
id uniqid() Unique id for the tag. This id can then be accessed via javascript. By default tag IDs have a prefix of bw-
add_id_prefix true Determines if the bw- prefix should be added to tag IDs.
true false
onclick blank Javascript function to execute when the close icon is clicked.
class bw-tag Any additional CSS you wish to add.

 

Tag with all attributes defined

                
                    <x-bladewind.tag 
                        label="accounting" 
                        can_close="true" 
                        color="pink" 
                        class="a1002" 
                        id="a1002"
                        add_id_prefix="false" 
                        shade="dark"
                        onclick="alert('you clicked on '+ dom_el('.a1002').innerText)" />
                
            

 

The source file for this component is available in resources > views > components > bladewind > tag.blade.php