Badge

Badges can be used for notification, tags, and status. They are used for count and numbers.

See this kit in action in our sample UI

Rectangle

Code Example

import React from 'react'
import Badge from '../_badge'

const BadgeDefault = (props) => {
  return (
    <div>
      <Badge
          text="+1"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          text="+4"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          text="+1000"
          variant="primary"
          {...props}
      />
    </div>
  )
}

export default BadgeDefault

Rounded

Code Example

import React from 'react'
import Badge from '../_badge'

const BadgeRounded = (props) => {
  return (
    <div>
      <Badge
          rounded
          text="+1"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          rounded
          text="+4"
          variant="primary"
          {...props}
      />

      &nbsp;

      <Badge
          rounded
          text="+1000"
          variant="primary"
          {...props}
      />
    </div>
  )
}

export default BadgeRounded

Colors

Code Example

import React from 'react'
import Badge from '../_badge'

const BadgeColors = (props) => {
  return (
    <div>
      <div>
        <Badge
            rounded
            text="+1"
            variant="primary"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="primary"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="primary"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="success"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="success"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="success"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="warning"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="warning"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="warning"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="error"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="error"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="error"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="info"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="info"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="info"
            {...props}
        />
      </div>

      <div>
        <Badge
            rounded
            text="+1"
            variant="neutral"
            {...props}
        />

        &nbsp;

        <Badge
            text="+4"
            variant="neutral"
            {...props}
        />

        &nbsp;

        <Badge
            text="+1000"
            variant="neutral"
            {...props}
        />
      </div>
    </div>
  )
}

export default BadgeColors

UI Samples using Badge Kit

Get the full picture. See how this kit is used in our samples.

Badge

See this kit in action in our sample UI

UI Samples using Badge Kit

Crowdsourced Posts