## Chips

Compact elements for tags, categories, filters, and selections.

### Basic Chips

Basic Chip Design Development Marketing
HTML

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
                <span class="chip">Basic Chip</span>
                <span class="chip">Design</span>
                <span class="chip">Development</span>
                <span class="chip">Marketing</span>
            </div>

### Chips with Avatar

John Doe Jane Smith
HTML

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
                <span
                    class="chip"
                    style="display: inline-flex; align-items: center; gap: 8px"
                >
                    <img
                        src="https://via.placeholder.com/24"
                        alt="User"
                        style="width: 24px; height: 24px; border-radius: 50%"
                    />
                    John Doe
                </span>
                <span
                    class="chip"
                    style="display: inline-flex; align-items: center; gap: 8px"
                >
                    <img
                        src="https://via.placeholder.com/24"
                        alt="User"
                        style="width: 24px; height: 24px; border-radius: 50%"
                    />
                    Jane Smith
                </span>
            </div>

### Dismissible Chips

JavaScript
TypeScript
Python
HTML

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
                <span
                    class="chip"
                    style="display: inline-flex; align-items: center; gap: 8px"
                >
                    JavaScript
                    <button
                        class="chip__close"
                        style="
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 14px;
                            opacity: 0.7;
                        "
                    >
                        &times;
                    </button>
                </span>
                <span
                    class="chip"
                    style="display: inline-flex; align-items: center; gap: 8px"
                >
                    TypeScript
                    <button
                        class="chip__close"
                        style="
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 14px;
                            opacity: 0.7;
                        "
                    >
                        &times;
                    </button>
                </span>
                <span
                    class="chip"
                    style="display: inline-flex; align-items: center; gap: 8px"
                >
                    Python
                    <button
                        class="chip__close"
                        style="
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 14px;
                            opacity: 0.7;
                        "
                    >
                        &times;
                    </button>
                </span>
            </div>

### Colored Chips

Info Success Warning Error
HTML

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
                <span
                    class="chip"
                    style="background: var(--color_state_info); color: white"
                >
                    Info
                </span>
                <span
                    class="chip"
                    style="background: var(--color_state_success); color: white"
                >
                    Success
                </span>
                <span class="chip" style="background: var(--color_state_warning)">
                    Warning
                </span>
                <span
                    class="chip"
                    style="background: var(--color_state_error); color: white"
                >
                    Error
                </span>
            </div>

### Outlined Chips

Outlined Info Success
HTML

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
                <span
                    class="chip"
                    style="
                        background: transparent;
                        border: 1px solid var(--color_line_primary);
                    "
                >
                    Outlined
                </span>
                <span
                    class="chip"
                    style="
                        background: transparent;
                        border: 1px solid var(--color_state_info);
                        color: var(--color_state_info);
                    "
                >
                    Info
                </span>
                <span
                    class="chip"
                    style="
                        background: transparent;
                        border: 1px solid var(--color_state_success);
                        color: var(--color_state_success);
                    "
                >
                    Success
                </span>
            </div>

### Chips Input Field

Tag 1
Tag 2
HTML

    <div
                class="chips-input"
                style="
                    display: flex;
                    flex-wrap: wrap;
                    gap: 8px;
                    padding: 8px 12px;
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 8px;
                    min-height: 48px;
                    align-items: center;
                "
            >
                <span
                    class="chip"
                    style="
                        display: inline-flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 13px;
                    "
                >
                    Tag 1
                    <button
                        style="
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 12px;
                        "
                    >
                        &times;
                    </button>
                </span>
                <span
                    class="chip"
                    style="
                        display: inline-flex;
                        align-items: center;
                        gap: 4px;
                        font-size: 13px;
                    "
                >
                    Tag 2
                    <button
                        style="
                            background: none;
                            border: none;
                            cursor: pointer;
                            font-size: 12px;
                        "
                    >
                        &times;
                    </button>
                </span>
                <input
                    type="text"
                    placeholder="Add tag..."
                    style="
                        border: none;
                        outline: none;
                        flex: 1;
                        min-width: 100px;
                        background: transparent;
                    "
                />
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!