TypeScript icon, indicating that this package has built-in type declarations

1.4.0 • Public • Published

Formidable OSS Badges

Maintenance Status

Badges for Formidable Open Source Projects


Using the package

  • yarn add formidable-oss-badges or npm install formidable-oss-badges
  • In your react app, import { FeaturedBadge, ProjectBadge } from "formidable-oss-badges";
  • To get hover styles using CSS modules import "formidable-oss-badges/dist/style.css";
  • Use the <ProjectBadge /> or <FeaturedBadge /> component as directed below


ProjectBadge props

The <ProjectBadge /> component takes five, optional, props:

Prop Type Description Example
color String (hex/RGB) Base color of the badge "#FF00FF"
abbreviation String Short representation of the name. Large font. Typically one uppercase letter, one lowercase. "Em"
description String Title or brief description. Smaller text, displayed in all-caps. "Enzyme Matchers"
className String Class to apply directly to the SVG "project-badge"
isHoverable Boolean Add hover style effects true
simple Boolean Hides the description and enlarges the abbreviation - use for small badge display false

It is recommended to at least include the color, description, and abbreviation props.

ProjectBadge children

Will accept any svg child (we recommend to use an <image/> with an embedded png, svg or lossless image format of your choice. See example 5).

Presence of a child will cause the component to ignore any abbreviation prop.

You will need to position the child yourself.


<image x="14%" y="20%" />


To use a Featured Formidable Badge, you only need to pass in a single prop, name, that matches one of the available badges listed below.

Available Badges

See featuredLogos for the latest available lineup.

  • renature
  • spectacle
  • urql
  • victory
  • nuka
  • owl
  • groqd
  • envy
  • figlog
  • cloudsplice

For a simplified version of the logo without the name in the badge (works better for smaller sizes), you can use the simple variant of any of the above options.

<FeaturedBadge name="victory" simple />

FeaturedBadge props

Prop Type Description Default
name String One of the available badge names ''
className String Additional class names ''
isHoverable Boolean Add hover style effects true
simple Boolean Hides the description and enlarges the abbreviation - use for small badge display false

Examples (with Images)

ProjectBadge Usage

Example 1:

<ProjectBadge color="#89E" abbreviation="No" description="Number" />

Example 2:

<ProjectBadge color="#E48055" abbreviation="Em" description="Enzyme Matchers" />

Example 3:

<ProjectBadge />

Example 5:

ProjectBadge with svg child:

<ProjectBadge abbreviation="R" description="React" color="#90dafa">

FeaturedBadge Usage

Example 6:

<FeaturedBadge name="victory">

Example Badges

1 2 3
Number Enzyme Matchers Blank
4 5 6
ProjectBadge with png IconBadge with png Featured badge

Try the components locally

To try out the badge components locally:

  1. git clone this repo
  2. cd formidable-oss-badges
  3. yarn install
  4. yarn storybook

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.

Package Sidebar


npm i formidable-oss-badges

Weekly Downloads






Unpacked Size

532 kB

Total Files


Last publish


  • scottianstewart
  • keithluchtel
  • ceceppa
  • robwalkerco
  • sarahformidable
  • scott-rippey
  • michaelmerrill
  • sarmeyer
  • mariano-formidable
  • ryan.roemer
  • formidable-owner
  • formidablelabs
  • carbonrobot
  • masiddee
  • kiraarghy