Skip to content

Instantly share code, notes, and snippets.

Last active December 2, 2022 13:47
  • Star 10 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
import React, { ReactNode } from "react";
import { classNames } from "../utils/class-names";
type Props = {
color: string,
className: string,
children?: ReactNode
export function Badge(props: Props) {
const { children, color, className } = props;
return (
"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 whitespace-no-wrap",
`bg-${color}-100 text-${color}-800`,
Badge.defaultProps = {
color: "gray"
<Badge />
<Badge color="pink" />
<Badge color="pink" className="text-xl" />

The good parts (you might think)

  1. It looks easy (not a lot of code)
  2. It looks maintainable (because it is not too big)
  3. It looks extensible (className prop)

The bad parts

  1. There is no way you can know what color is passed in beforehand
  2. TypeScript won't yell at you if you pass "foobar" to the color, because it is a string.
  3. PurgeCSS can't minimize / strip the dynamic css
  4. The className introduces hidden/implicit variants/states of your component, this will be a nightmare to refactor later. You change one thing, it doesn't work because in some obscure spot you added a className that overwrote something.

Here is a good example:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment