Theme - xe-ui-component

Badge

카테고리, 읽지 않은 알림 수 등 특정 항목을 강조 시 badge를 사용합니다.

Examples
Badge sizes
Outline Badge
Empty Badge

Examples

상활 별 클래스에 맞게 구분하여 badge를 이용할 수 있습니다.

xe-primary

xe-success

xe-positive

xe-warning

xe-danger

xe-fail

xe-black

<div class="xe-form-group">
    <div class="xe-badge xe-primary">xe-primary</div>
    <div class="xe-badge xe-success">xe-success</div>
    <div class="xe-badge xe-positive">xe-positive</div>
    <div class="xe-badge xe-warning">xe-warning</div>
    <div class="xe-badge xe-danger">xe-danger</div>
    <div class="xe-badge xe-fail">xe-fail</div>
    <div class="xe-badge xe-black">xe-black</div>
</div>

Badge sizes

클래스에 따라 버튼 크기를 조절할 수 있습니다.

default

medium

large

<div class="xe-form-group">
    <div class="xe-badge xe-primary">default</div>
    <div class="xe-badge xe-success">default</div>
    <div class="xe-badge xe-positive">default</div>
    <div class="xe-badge xe-warning">default</div>
    <div class="xe-badge xe-danger">default</div>
    <div class="xe-badge xe-fail">default</div>
    <div class="xe-badge xe-black">default</div>
</div>
<div class="xe-form-group">
    <div class="xe-badge xe-primary medium">medium</div>
    <div class="xe-badge xe-success medium">medium</div>
    <div class="xe-badge xe-positive medium">medium</div>
    <div class="xe-badge xe-warning medium">medium</div>
    <div class="xe-badge xe-danger medium">medium</div>
    <div class="xe-badge xe-fail medium">medium</div>
    <div class="xe-badge xe-black medium">medium</div>
</div>
<div class="xe-form-group">
    <div class="xe-badge xe-primary large">large</div>
    <div class="xe-badge xe-success large">large</div>
    <div class="xe-badge xe-positive large">large</div>
    <div class="xe-badge xe-warning large">large</div>
    <div class="xe-badge xe-danger large">large</div>
    <div class="xe-badge xe-fail large">large</div>
    <div class="xe-badge xe-black large">large</div>
</div>

Outline badge

.*-outline 클래스 통해 BG 없어 border로만 이루어져 있는 버튼 스타일을 사용할 수 있습니다.

xe-primary-outline

xe-success-outline

xe-positive-outline

xe-warning-outline

xe-danger-outline

xe-fail-outline

xe-black-outline

<div class="xe-badge xe-primary-outline">xe-primary-outline</div>
<div class="xe-badge xe-success-outline">xe-success-outline</div>
<div class="xe-badge xe-positive-outline">xe-positive-outline</div>
<div class="xe-badge xe-warning-outline">xe-warning-outline</div>
<div class="xe-badge xe-danger-outline">xe-danger-outline</div>
<div class="xe-badge xe-fail-outline">xe-fail-outline</div>
<div class="xe-badge xe-black-outline">xe-black-outline</div>

Empty badge

텍스트 없이 원형의 비어있는 형태로 활용할 수 있습니다.

<div class="xe-badge xe-primary empty"></div>
<div class="xe-badge xe-success empty"></div>
<div class="xe-badge xe-positive empty"></div>
<div class="xe-badge xe-warning empty"></div>
<div class="xe-badge xe-danger empty"></div>
<div class="xe-badge xe-fail empty"></div>
<div class="xe-badge xe-black empty"></div>