v7.1.0

Badge

Table of Contents

Detail

バッジ装飾を作るエレメント CSS。

Basic

Tag
Pattern
Other
任意 推奨 情報 重要 注意 必須
<span class="badge is-plain">任意</span>
<span class="badge is-plain is-primary">推奨</span>
<span class="badge is-plain is-info">情報</span>
<span class="badge is-plain is-success">重要</span>
<span class="badge is-plain is-warning">注意</span>
<span class="badge is-plain is-danger">必須</span>
SelectorDescription
.badgeバッジ装飾の起点として使うセレクター。
Warning

.badge には .is-plain .is-outline どちらかの付与が必須です。

Modifier (One is required)Description
.is-plain.badge に付与すると塗りベースのボタンになります。
.is-outline.badge に付与するとアウトラインのあるボタンになります。
ModifierDescription
.is-strong.badge に付与すると太文字になります。
.is-round.badge に付与すると角が完全に丸くなります。
.is-disabled.badge に付与すると非活性になります。

Role

.is-(role) 形式のモディファイアを .button に付与すると、各役割毎のカラーリングに変化します。

PrimaryInfoSuccessWarningDanger
.is-primary.is-info.is-success.is-warning.is-danger

Square

Tag
Pattern
Other
<span class="badge is-plain is-square"><i aria-hidden="true" class="fas fa-tag"></i></span>
<span class="badge is-plain is-square is-primary"><i aria-hidden="true" class="fas fa-check"></i></span>
<span class="badge is-plain is-square is-info"><i aria-hidden="true" class="fas fa-info"></i></span>
<span class="badge is-plain is-square is-success"><i aria-hidden="true" class="fas fa-check"></i></span>
<span class="badge is-plain is-square is-warning"><i aria-hidden="true" class="fas fa-info"></i></span>
<span class="badge is-plain is-square is-danger"><i aria-hidden="true" class="fas fa-minus"></i></span>
ModifierDescription
.is-square.badge に付与すると正方形になります。

Circle

Tag
Pattern
Other
<span class="badge is-plain is-circle"><i aria-hidden="true" class="fas fa-tag"></i></span>
<span class="badge is-plain is-circle is-primary"><i aria-hidden="true" class="fas fa-check"></i></span>
<span class="badge is-plain is-circle is-info"><i aria-hidden="true" class="fas fa-info"></i></span>
<span class="badge is-plain is-circle is-success"><i aria-hidden="true" class="fas fa-check"></i></span>
<span class="badge is-plain is-circle is-warning"><i aria-hidden="true" class="fas fa-info"></i></span>
<span class="badge is-plain is-circle is-danger"><i aria-hidden="true" class="fas fa-minus"></i></span>
ModifierDescription
.is-circle.badge に付与すると正円になります。

Variables

CSS Variables
Name
Default Value
Compiled Value
  • Name
    $selector-badge
    Default Value
    .badge
    Compiled Value
    .badge
  • Name
    $modifier-badge-strong
    Default Value
    .is-strong
    Compiled Value
    .is-strong
  • Name
    $modifier-badge-round
    Default Value
    .is-round
    Compiled Value
    .is-round
  • Name
    $modifier-badge-square
    Default Value
    .is-square
    Compiled Value
    .is-square
  • Name
    $modifier-badge-circle
    Default Value
    .is-circle
    Compiled Value
    .is-circle
  • Name
    $modifier-badge-disabled
    Default Value
    .is-disabled
    Compiled Value
    .is-disabled
  • Name
    $modifier-badge-plain
    Default Value
    .is-plain
    Compiled Value
    .is-plain
  • Name
    $modifier-badge-outline
    Default Value
    .is-outline
    Compiled Value
    .is-outline
  • Name
    $modifier-badge-primary
    Default Value
    .is-primary
    Compiled Value
    .is-primary
  • Name
    $modifier-badge-info
    Default Value
    .is-info
    Compiled Value
    .is-info
  • Name
    $modifier-badge-success
    Default Value
    .is-success
    Compiled Value
    .is-success
  • Name
    $modifier-badge-warning
    Default Value
    .is-warning
    Compiled Value
    .is-warning
  • Name
    $modifier-badge-danger
    Default Value
    .is-danger
    Compiled Value
    .is-danger
  • Name
    $badge-padding
    Default Value
    0.25em 0.375em
    Compiled Value
    0.25em 0.375em
  • Name
    $badge-border-width
    Default Value
    $global-border-width
    Compiled Value
    1px
  • Name
    $badge-border-radius
    Default Value
    $radius-sm
    Compiled Value
    3px
  • Name
    $badge-paint-color
    Default Value
    $convert-button-paint-color
    Compiled Value
    white
  • Name
    $badge-line-height
    Default Value
    $line-height-xs
    Compiled Value
    1.25
  • Name
    $badge-strong-font-weight
    Default Value
    $font-weight-strong
    Compiled Value
    700
  • Name
    $badge-round-border-radius
    Default Value
    $radius-full
    Compiled Value
    999em
  • Name
    $badge-disabled-background-color
    Default Value
    $convert-disabled-background-color
    Compiled Value
    #bdbdbd
  • Name
    $badge-disabled-color
    Default Value
    $convert-disabled-color
    Compiled Value
    rgba(0, 0, 0, 0.26)
  • Name
    $badge-square-width
    Default Value
    calc(1.75em + #{$global-border-width} * 2)
    Compiled Value
    calc(1.75em + 1px * 2)
  • Name
    $badge-square-height
    Default Value
    calc(1.75em + #{$global-border-width} * 2)
    Compiled Value
    calc(1.75em + 1px * 2)
  • Name
    $badge-square-border-radius
    Default Value
    $radius-sm
    Compiled Value
    3px
  • Name
    $badge-circle-width
    Default Value
    calc(1.75em + #{$global-border-width} * 2)
    Compiled Value
    calc(1.75em + 1px * 2)
  • Name
    $badge-circle-height
    Default Value
    calc(1.75em + #{$global-border-width} * 2)
    Compiled Value
    calc(1.75em + 1px * 2)
  • Name
    $badge-circle-border-radius
    Default Value
    $radius-full
    Compiled Value
    999em
  • Name
    $badge-plain-background-color
    Default Value
    $convert-background-2
    Compiled Value
    whitesmoke
  • Name
    $badge-plain-primary-background-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $badge-plain-info-background-color
    Default Value
    $convert-info
    Compiled Value
    #4b9bd8
  • Name
    $badge-plain-success-background-color
    Default Value
    $convert-success
    Compiled Value
    #2ca52c
  • Name
    $badge-plain-warning-background-color
    Default Value
    $convert-warning
    Compiled Value
    #ec8313
  • Name
    $badge-plain-danger-background-color
    Default Value
    $convert-danger
    Compiled Value
    #db5757
  • Name
    $badge-outline-background-color
    Default Value
    $convert-background
    Compiled Value
    white
  • Name
    $badge-outline-border-color
    Default Value
    $convert-border
    Compiled Value
    #d1d8dc
  • Name
    $badge-outline-primary-border-color
    Default Value
    $convert-primary
    Compiled Value
    #37b0be
  • Name
    $badge-outline-primary-color
    Default Value
    $convert-primary-strong
    Compiled Value
    #37b0be
  • Name
    $badge-outline-info-border-color
    Default Value
    $convert-info
    Compiled Value
    #4b9bd8
  • Name
    $badge-outline-info-color
    Default Value
    $convert-info-strong
    Compiled Value
    #4b9bd8
  • Name
    $badge-outline-success-border-color
    Default Value
    $convert-success
    Compiled Value
    #2ca52c
  • Name
    $badge-outline-success-color
    Default Value
    $convert-success-strong
    Compiled Value
    #2ca52c
  • Name
    $badge-outline-warning-border-color
    Default Value
    $convert-warning
    Compiled Value
    #ec8313
  • Name
    $badge-outline-warning-color
    Default Value
    $convert-warning-strong
    Compiled Value
    #ec8313
  • Name
    $badge-outline-danger-border-color
    Default Value
    $convert-danger
    Compiled Value
    #db5757
  • Name
    $badge-outline-danger-color
    Default Value
    $convert-danger-strong
    Compiled Value
    #db5757

Mixins

  • musubii-style-badge()
  • musubii-style-badge-strong()
  • musubii-style-badge-round()
  • musubii-style-badge-square()
  • musubii-style-badge-circle()
  • musubii-style-badge-plain()
  • musubii-style-badge-plain-primary()
  • musubii-style-badge-plain-info()
  • musubii-style-badge-plain-success()
  • musubii-style-badge-plain-warning()
  • musubii-style-badge-plain-danger()
  • musubii-style-badge-plain-disabled()
  • musubii-style-badge-outline()
  • musubii-style-badge-outline-primary()
  • musubii-style-badge-outline-info()
  • musubii-style-badge-outline-success()
  • musubii-style-badge-outline-warning()
  • musubii-style-badge-outline-danger()
  • musubii-style-badge-outline-disabled()

Sources