Chip

Soft inline status tags, category indicators, and metadata labels. Lighter-weight than Badge — uses a soft tinted background with coloured text instead of a solid filled pill. Ideal for tags, filters, and inline status labels that should blend into the content rather than stand out.

Variants

Eight colour variants plus a neutral default.

Default Primary Success Warning Danger Purple Secondary Info

<?= $m->chip('id', 'Default') ?>
<?= $m->chip('id', 'Primary')->primary() ?>
<?= $m->chip('id', 'Success')->success() ?>
<?= $m->chip('id', 'Warning')->warning() ?>
<?= $m->chip('id', 'Danger')->danger() ?>
<?= $m->chip('id', 'Purple')->purple() ?>
<?= $m->chip('id', 'Secondary')->secondary() ?>
<?= $m->chip('id', 'Info')->info() ?>

With Icons

Add a Font Awesome icon with ->icon().

Active Draft Pending Rejected Featured PHP

<?= $m->chip('statusActive',  'Active')->success()->icon('fa-circle-check') ?>
<?= $m->chip('statusDraft',   'Draft')->secondary()->icon('fa-pencil') ?>
<?= $m->chip('statusPending', 'Pending')->warning()->icon('fa-clock') ?>

// Raw HTML (no PHP helper)
<span class="m-chip m-chip-success">
    <i class="fas fa-circle-check"></i> Active
</span>

Inline in Content

Chips sit naturally inline with text, making them ideal for tagging items inside tables, cards, and list rows.

Homepage redesign Design Frontend In Progress

API authentication Backend Done

Legacy payment gateway Deprecated Needs Review

// Inside a table row or list item
<td>
    Homepage redesign
    <?= $m->chip('c1', 'Design')->primary()->icon('fa-palette') ?>
    <?= $m->chip('c2', 'In Progress')->warning()->icon('fa-clock') ?>
</td>

Badge vs Chip

Badge uses a solid gradient fill and is eye-catching — good for counts, alerts, and prominent status calls. Chip uses a soft tinted background and is subtler — good for tags, categories, and inline metadata that should complement the content rather than dominate it.

Badge Chip Badge Chip Badge Chip

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->chip($id, $text)`	`string, string`	Create a Chip component.
`->text($text)`	`string`	Set chip text.
`->icon($faIcon)`	`string`	Add a Font Awesome icon (e.g. `'fa-check'`).
`->variant($variant)`	`string`	Set colour variant directly: `default\|primary\|success\|warning\|danger\|purple\|secondary\|info`.
`->primary()`		Blue tint.
`->success()`		Green tint.
`->warning()`		Orange tint.
`->danger()`		Red tint.
`->purple()`		Purple tint.
`->secondary()`		Grey tint.
`->info()`		Cyan tint.

PHP CSS Classes

Method / Property	Parameters	Description
`.m-chip`		Base chip styling (display:inline-flex, rounded corners, small padding).
`.m-chip-default`		Neutral grey tint — used when no variant is specified.
`.m-chip-primary`		Blue tint.
`.m-chip-success`		Green tint.
`.m-chip-warning`		Orange tint.
`.m-chip-danger`		Red tint.
`.m-chip-purple`		Purple tint.
`.m-chip-secondary`		Cool grey tint.
`.m-chip-info`		Cyan tint.