Version 0.40.0

UI Atoms

Badges

Badges colors

Default Primary Secondary Success Warning Danger
<span class="sui-a-badge">
    Default
</span>

<span class="sui-a-badge as--primary">
    Primary
</span>

<span class="sui-a-badge as--secondary">
    Secondary
</span>

<span class="sui-a-badge as--success">
    Success
</span>

<span class="sui-a-badge as--warning">
    Warning
</span>

<span class="sui-a-badge as--danger">
    Danger
</span>

Badges text

Default Primary Secondary Success Warning Danger
<span class="sui-a-badge as--text">
    Default
</span>

<span class="sui-a-badge as--text as--primary">
    Primary
</span>

<span class="sui-a-badge as--text as--secondary">
    Secondary
</span>

<span class="sui-a-badge as--text as--success">
    Success
</span>

<span class="sui-a-badge as--text as--warning">
    Warning
</span>

<span class="sui-a-badge as--text as--danger">
    Danger
</span>

Badges sizes

Extra small Small Default Large Extra large
<span class="sui-a-badge as--xs">
    Extra small
</span>

<span class="sui-a-badge as--sm">
    Small
</span>

<span class="sui-a-badge">
    Default
</span>

<span class="sui-a-badge as--lg">
    Large
</span>

<span class="sui-a-badge as--xl">
    Extra large
</span>

Badges margins & align with text

Label Text Text Label Text Text Label
<span class="sui-a-badge as--start">
    Label
</span>
Text 

Text
<span class="sui-a-badge as--between">
    Label
</span>
Text 

Text
<span class="sui-a-badge as--end">
    Label
</span>

React

Name: saagie-ui/atoms/Badge

Dependencies

React PropTypes

Example

Code Example

import React from 'react';
import { Badge } from 'saagie-ui/react';

class BadgeExample extends React.Component {
  render() {
    return (
      <div>
        <div>
          <Badge color="success">My badge</Badge>
          <Badge color="primary">My badge</Badge>
          <Badge color="secondary">My badge</Badge>
          <Badge color="success">My badge</Badge>
          <Badge color="warning">My badge</Badge>
          <Badge color="danger">My badge</Badge>
        </div>
        <div>
          <Badge color="success" asText>My badge</Badge>
          <Badge color="primary" asText>My badge</Badge>
          <Badge color="secondary" asText>My badge</Badge>
          <Badge color="success" asText>My badge</Badge>
          <Badge color="warning" asText>My badge</Badge>
          <Badge color="danger" asText>My badge</Badge>
        </div>
        <div>
          <Badge size="xs" >My badge</Badge>
          <Badge size="sm" >My badge</Badge>
          <Badge>My badge</Badge>
          <Badge size="lg" >My badge</Badge>
          <Badge size="xl" >My badge</Badge>
        </div>
        <div>
          <Badge position="start">My badge</Badge>
          Text
          Text
          <Badge position="between">My badge</Badge>
          Text
          Text
          <Badge position="end">My badge</Badge>
        </div>
      </div>
    );
  }
}

export default BadgeExample;

Arguments

Params Type Details
children node Children elements.
className (optional) string custom CSS class names.
color (optional) string CSS color without the as-- prefix.
position (optional) string CSS margins & align with text without the as-- prefix.
size (optional) string CSS size without the as-- prefix.
asText (optional) bool True for as--text behavior.
attributes (optional) object Extra HTML attributes like id, data-, aria- etc.