Tags Styles

Tag - Basic

Primary
Alert
Information
Success
Dark
Light
                        <div class="tag tag--primary">Primary</div>
                        <div class="tag tag--alert">Alert</div>
                        <div class="tag tag--info">Information</div>
                        <div class="tag tag--success">Success</div>
                        <div class="tag tag--dark">Dark</div>
                        <div class="tag tag--light">Light</div>

Tag - as link

Primary Alert Information Success Dark Light 
                        <a href="#LINK" class="tag tag--primary">Primary</a>
                        <a href="#LINK" class="tag tag--alert">Alert</a>
                        <a href="#LINK" class="tag tag--info">Information</a>
                        <a href="#LINK" class="tag tag--success">Success</a>
                        <a href="#LINK" class="tag tag--dark">Dark</a>
                        <a href="#LINK" class="tag tag--light">Light</a>

Tag - with remove button

Primary Tag with Icon
Alert Tag with Icon
Info Tag with Icon
Success Tag with Icon
Dark Tag with Icon
Light Tag with Icon 
                        <div class="tag tag--primary">
                            <span>Primary Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>
                        <div class="tag tag--alert">
                            <span>Alert Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>
                        <div class="tag tag--info">
                            <span>Info Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>
                        <div class="tag tag--success">
                            <span>Success Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>
                        <div class="tag tag--dark">
                            <span>Dark Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>
                        <div class="tag tag--light">
                            <span>Light Tag with Icon</span>
                            <button type="button" class="icon icon--close" aria-label="close tag">
                                <span class="visually-hidden">Click to close alert</span>
                            </button>
                        </div>

Tag Documentation

Use

Tags should be max a couple of words in length