Fain Component Library

Badge 

<!-- Start: @badge--default -->
<style>
    .index__badge___2ikYM {
        display: inline-block;
        min-width: 2.1em;
        padding: 0.3em;
        border-radius: 50%;
        font-size: 0.6rem;
        text-align: center;
        background: #1779ba;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__primary___HI8Tq {
        background: #1779ba;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__secondary___22wXw {
        background: #767676;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__success___vnyPN {
        background: #3adb76;
        color: #0a0a0a;
    }
    
    .index__badge___2ikYM.index__warning___BHPTX {
        background: #ffae00;
        color: #0a0a0a;
    }
    
    .index__badge___2ikYM.index__alert___33wf2 {
        background: #cc4b37;
        color: #fefefe;
    }
</style>
<span class="index__badge___2ikYM">P</span>
<!-- End: @badge--default -->

<!-- Start: @badge--warning -->
<style>
    .index__badge___2ikYM {
        display: inline-block;
        min-width: 2.1em;
        padding: 0.3em;
        border-radius: 50%;
        font-size: 0.6rem;
        text-align: center;
        background: #1779ba;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__primary___HI8Tq {
        background: #1779ba;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__secondary___22wXw {
        background: #767676;
        color: #fefefe;
    }
    
    .index__badge___2ikYM.index__success___vnyPN {
        background: #3adb76;
        color: #0a0a0a;
    }
    
    .index__badge___2ikYM.index__warning___BHPTX {
        background: #ffae00;
        color: #0a0a0a;
    }
    
    .index__badge___2ikYM.index__alert___33wf2 {
        background: #cc4b37;
        color: #fefefe;
    }
</style>
<span color="warning" class="index__badge___2ikYM index__warning___BHPTX">W</span>
<!-- End: @badge--warning -->
 
import React from 'react';
import Badge from 'fain/media/Badge';

export default function BadgeExample(props) {
  return (
    <Badge
      color={props.color}
    >{props.children}</Badge>
  );
}

/* No context defined for this component. */
  • Content: 
    // @flow

import classNames from 'classnames';
import React from 'react';

import styles from './index.scss';

type Props = {
  className: ClassName,
  color: string,
};

function Badge(props: Props) {
  return (
    <span
      {...props}
      className={classNames(props.className, styles.badge, styles[props.color])}
    />
  );
}

export default Badge;
  • URL: /components/raw/badge/index.jsx
  • Filesystem Path: src/media/Badge/index.jsx
  • Size: 358 Bytes
  • Content: 
    @import 'fain/styles/base';
@import 'foundation-sites/scss/components/badge';

@include foundation-badge;
  • URL: /components/raw/badge/index.scss
  • Filesystem Path: src/media/Badge/index.scss
  • Size: 106 Bytes

There are no notes for this item.