Badges

Scale to parent

import React from 'react';
import { Badge } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <h1>
                    Heading <Badge color="secondary">New</Badge>
                </h1>
                <h2>
                    Heading <Badge color="secondary">New</Badge>
                </h2>
                <h3>
                    Heading <Badge color="secondary">New</Badge>
                </h3>
                <h4>
                    Heading <Badge color="secondary">New</Badge>
                </h4>
                <h5>
                    Heading <Badge color="secondary">New</Badge>
                </h5>
                <h6>
                    Heading <Badge color="secondary">New</Badge>
                </h6>
            </div>
        );
    }
}

Badges can be used as part of links or buttons to provide a counter.

import React from 'react';
import { Badge, Button } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Button color="primary" outline>
                    Notifications{' '}
                    <Badge color="secondary" className="ml-5">
                        4
                    </Badge>
                </Button>
            </div>
        );
    }
}

Contextual variations

import React from 'react';
import { Badge } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Badge color="primary">Primary</Badge>
                <Badge color="secondary">Secondary</Badge>
                <Badge color="alternative">Alternative</Badge>
                <Badge color="success">Success</Badge>
                <Badge color="danger">Danger</Badge>
                <Badge color="warning">Warning</Badge>
                <Badge color="info">Info</Badge>
                <Badge color="light">Light</Badge>
                <Badge color="dark">Dark</Badge>
            </div>
        );
    }
}

Badge Outline

import React from 'react';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <div className="badge badge-outline-primary">primary</div>
                <div className="badge badge-outline-alternative">alternative</div>
            </div>
        );
    }
}

Pills

import React from 'react';
import { Badge } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Badge color="primary" pill>
                    Primary
                </Badge>
                <Badge color="secondary" pill>
                    Secondary
                </Badge>
                <Badge color="alternative" pill>
                    Alternative
                </Badge>
                <Badge color="success" pill>
                    Success
                </Badge>
                <Badge color="danger" pill>
                    Danger
                </Badge>
                <Badge color="warning" pill>
                    Warning
                </Badge>
                <Badge color="info" pill>
                    Info
                </Badge>
                <Badge color="light" pill>
                    Light
                </Badge>
                <Badge color="dark" pill>
                    Dark
                </Badge>
            </div>
        );
    }
}

Links

Adding the href prop (without specifying a tag prop) will default the badge to a link.

import React from 'react';
import { Badge } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Badge href="#" color="primary">
                    Primary
                </Badge>
                <Badge href="#" color="secondary">
                    Secondary
                </Badge>
                <Badge href="#" color="alternative">
                    alternative
                </Badge>
                <Badge href="#" color="success">
                    Success
                </Badge>
                <Badge href="#" color="danger">
                    Danger
                </Badge>
                <Badge href="#" color="warning">
                    Warning
                </Badge>
                <Badge href="#" color="info">
                    Info
                </Badge>
                <Badge href="#" color="light">
                    Light
                </Badge>
                <Badge href="#" color="dark">
                    Dark
                </Badge>
            </div>
        );
    }
}

Properties

Badge.propTypes = {
  color: PropTypes.string,
  pill: PropTypes.bool,
  tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
  children: PropTypes.node,
  className: PropTypes.string,
  cssModule: PropTypes.object,
};

Badge.defaultProps = {
  color: 'secondary',
  pill: false,
  tag: 'span',
};

Badges with icon

import React from 'react';
import { Badge, SvgIcon } from 'seduo-ui';
export default class Example extends React.Component {
    render() {
        return (
            <div>
                <Badge href="#" color="primary">
                    <span className="text-nowrap">
                        Primary <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="secondary">
                    <span className="text-nowrap">
                        Secondary <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="alternative">
                    <span className="text-nowrap">
                        Alternative <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="success">
                    <span className="text-nowrap">
                        Success <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="danger">
                    <span className="text-nowrap">
                        Danger <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="warning">
                    <span className="text-nowrap">
                        Warning <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="info">
                    <span className="text-nowrap">
                        Info <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="light">
                    <span className="text-nowrap">
                        Light <SvgIcon kind="Close" className="icon icon--small" />
                    </span>
                </Badge>
                <Badge href="#" color="dark">
                    <span className="text-nowrap">
                        Dark <SvgIcon kind="Close" className="icon icon-white icon--small" />
                    </span>
                </Badge>
            </div>
        );
    }
}