furl

Badge

Badges help you present tags, categories or other short-form content.

Examples

BadgePrimarySecondarySuccessWarningDangerLargeOutlineLightRounded
import React from 'react';
import ReactDOM from 'react-dom';
import { Badge } from 'furl-components';

ReactDOM.render(
  <Badge color='secondary' size='large' shape='rounded' fill='outline'>
    Rockstar
  </Badge>, 
  document.getElementById('root')
);

API

Badge props
Property Description Type Default
color badge color string 'plain'
size badge size string 'normal'
fill fill style string 'flat'
shape badge shape string 'normal'
text badge text transformaton string 'normal'

Notes

  • color can be any of the predefined color palettes ('plain', 'primary', 'secondary', 'success', 'warning' or 'danger').
  • size can be either 'normal' or 'large'.
  • fill can be one of the following: 'flat', 'outline' or 'light'.
  • shape can be either 'normal' or 'rounded'.
  • text can be either 'normal' or 'uppercase'.