Saltar al contenido principal

Badge

Contador o punto pequeño, en línea o pegado a una esquina de otro elemento.

Uso

import {Bell} from 'lucide-react-native';
import {Badge} from 'rn-inkpad';

<Badge value={3}>
<Bell size={28} />
</Badge>

<Badge value={150} max={99} /> // renders "99+"
<Badge dot color="#22C55E" />

Props

NombreTipoPor defectoDescripción
valuenumber | stringContent. Numbers above max render as max+. 0, empty or undefined hide the badge.
maxnumber99Cap for numeric values.
dotbooleanfalseSmall dot without text.
colorstringtheme secondaryBackground color.
textColorstring#FFFFFFText color.
sizenumber18 (10 for dots)Height of the badge.
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'top-rightCorner used when wrapping children.
visiblebooleantrueHide the badge but keep the children.
childrenReactNodeElement the badge is attached to.
styleStyleProp<ViewStyle>Wrapper (or badge, when inline) style.