All components
Icon Badge
Squared icon containers in outline, solid, and subtle variants for feature lists and empty states.
1234567891011import { IconBadge } from "#components/ui/ark-ui/icon-badge.tsx";import { indigoPalette } from "@stylexblocks/ui/themes/palettes.ts";
export function Example() { return ( {/* variant + size props resolve through the StyleX recipe */} <IconBadge variant="subtle" size="md" palette={indigoPalette}> <SparkIcon /> </IconBadge> );}Variants
outline
solid
subtle
Sizes
sm
md
lg
xl
Install
1npx stylexblocks add icon-badgeSource
components/ui/ark-ui/icon-badge.tsx
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677import * as stylex from "@stylexjs/stylex";import { createComponent } from "#lib/ark-ui/create-component.tsx";import { defineRecipe } from "#lib/recipe-props.ts";import { colorPalette } from '@stylexblocks/ui/color-palette.stylex.ts'import { colors } from '@stylexblocks/ui/tokens/colors.stylex.ts'import { semanticRadii } from '@stylexblocks/ui/semantic-tokens/radii.stylex.ts'import { sizes } from '@stylexblocks/ui/tokens/sizes.stylex.ts'
const iconBadgeStyles = stylex.create({ base: { display: 'inline-flex', alignItems: 'center', justifyContent: 'center', },})
const iconBadgeVariants = stylex.create({ outline: { borderWidth: '1px', borderColor: colorPalette.subtle, color: colorPalette.fg, }, solid: { backgroundColor: colorPalette.solid, color: colors.white, }, subtle: { backgroundColor: colorPalette.subtle, color: colorPalette.fg, },})
const iconBadgeSizes = stylex.create({ sm: { borderRadius: semanticRadii.control, fontSize: '0.9em', width: sizes.controlXs, height: sizes.controlXs, }, md: { borderRadius: semanticRadii.control, fontSize: '1.1em', width: sizes.controlMd, height: sizes.controlMd, }, lg: { borderRadius: semanticRadii.control, fontSize: '1.3em', width: sizes.controlLg, height: sizes.controlLg, }, xl: { borderRadius: semanticRadii.control, fontSize: '1.5em', width: sizes.controlXl, height: sizes.controlXl, },})
export type IconBadgeVariant = keyof typeof iconBadgeVariants
export type IconBadgeSize = keyof typeof iconBadgeSizes
/** * IconBadge — recipe and component colocated in one file. Variant/size props * resolve mechanically from the axis maps. Composition via `asChild`. */const iconBadgeRecipe = defineRecipe({ styles: iconBadgeStyles, axes: { variant: iconBadgeVariants, size: iconBadgeSizes }, defaultVariants: { variant: "outline", size: "md" },});
export const IconBadge = createComponent("span", iconBadgeRecipe, "IconBadge");
export type IconBadgeProps = React.ComponentProps<typeof IconBadge>;