Skip to main content

Badge (+Babel)

Props#

type#

Note: Default type is secondary.

Copy ClassNames on Click (Just Babel)

All Types
ctacta-greennegativeredsecondarysecondary-lightbluegreen
For Outlined Badge Use outlined as className or Props


For Quiet Badge Use quiet as className or Props

(For Now Just secondary Have A Quiet Style)

React
متوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسط

Babel
متوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسطمتوسط
import { Badge } from 'app-library';
// React Components
<Badge type="cta">متوسط</Badge>
<Badge type="cta" outlined>متوسط</Badge>
<Badge type="secondary" quiet>متوسط</Badge> // Now Only Secondary
//Babel
<span class="badge badge-cta">متوسط</span>
<span class="badge badge-cta outlined">متوسط</span>
<span class="badge badge-secondary quiet">متوسط</span> // Now Only Secondary

size#

Note 1: Default size is md.

Note 2: for full-width badge, use fullWidth as props (Default: false).

کوچکمتوسطبزرگخیلی بزرگخیلی خیلی بزرگطول کاملطول کاملطول کاملطول کاملطول کاملکوچکمتوسطبزرگخیلی بزرگخیلی خیلی بزرگطول کاملطول کاملطول کاملطول کاملطول کامل
// React Components
<Badge size="sm">کوچک</Badge>
<Badge size="md">متوسط</Badge>
<Badge size="lg">بزرگ</Badge>
<Badge size="xl">خیلی بزرگ</Badge>
<Badge size="xxl">خیلی خیلی بزرگ</Badge>
<Badge size="sm" fullWidth >طول کامل</Badge>
<Badge size="md" fullWidth >طول کامل</Badge>
<Badge size="lg" fullWidth >طول کامل</Badge>
<Badge size="xl" fullWidth >طول کامل</Badge>
<Badge size="xxl" fullWidth >طول کامل</Badge>
// Babel
<span class="badge badge-sm">کوچک</span>
<span class="badge badge-md">متوسط</span>
<span class="badge badge-lg">بزرگ</span>
<span class="badge badge-xl">خیلی بزرگ</span>
<span class="badge badge-xxl">خیلی خیلی بزرگ</span>
<span class="badge badge-sm badge-full">طول کامل</span>
<span class="badge badge-md badge-full">طول کامل</span>
<span class="badge badge-lg badge-full">طول کامل</span>
<span class="badge badge-xl badge-full">طول کامل</span>
<span class="badge badge-xxl badge-full">طول کامل</span>

icon#

Note 1: change icon position left to right using iconPosition props (Default position is right except cross icon).

متوسطمتوسطمتوسطمتوسطمتوسط

متوسطمتوسط
// React Components
<Badge icon="cross" type="cta">
متوسط
</Badge>
<Badge icon="cross" outlined type="cta">
متوسط
</Badge>
<Badge icon="trumpet" type="cta">
متوسط
</Badge>
<Badge icon="trumpet" type="cta-green">
متوسط
</Badge>
<Badge icon="trumpet" outlined type="cta-green">
متوسط
</Badge>
// Babel
<span className="badge badge-cta">
<span className="icon-edit icon-right"></span>
<span className="label">متوسط</span>
</span>
<span className="badge badge-cta-green outlined">
<span className="label">متوسط</span>
<span className="icon-edit icon-left"></span>
</span>

iconAction#

Example#

متوسط

متوسط
// React Components
export const App = () => {
const actionFunc = (e) => {
console.log(e.target.dataset['value']);
};
return (
<Badge icon="cross" iconAction={actionFunc} type="cta">
متوسط
</Badge>
);
};
// Babel
<span className="badge badge-cta outlined">
<span className="label">متوسط</span>
<span onclick="onClickFunction()" className="icon-cross icon-left"></span>
</span>;

circle#

Example#

Circle
<Badge circle className="custom-size-and-color">
Circle
</Badge>
<style jsx>
{`
.custom-size-and-color {
background-color: #eaeaea;
width: 180px;
height: 180px;
}
`}
</style>