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.

pending

                    
                        <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.

pending pending pending pending pending pending pending pending pending

                    
                        <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"

pending pending pending pending pending pending pending pending pending

                    
                        <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.

pending pending

                    
                        <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"

marketing accounting

                
                    <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