DBadge
A component for displaying small count or status indicators.
Import
import { DBadge } from '@dynamic-framework/ui-react';
TypeScript Interface
type Props = BaseProps & {
text?: string;
soft?: boolean;
size?: 'sm' | 'lg';
rounded?: boolean;
color?: ComponentColor;
id?: string;
iconStart?: string;
iconEnd?: string;
iconMaterialStyle?: boolean;
iconFamilyClass?: string;
iconFamilyPrefix?: string;
};
type ComponentColor = string;
type BaseProps = {
style?: CSSProperties;
className?: string;
dataAttributes?: DataAttributes;
};
Props
Text content to display inside the badge.
If true, applies a softer, lighter color variant of the badge.
Size variant of the badge.
If true, applies rounded pill styling to the badge.
Color variant of the badge. Accepts any valid color name (e.g., 'primary', 'success', 'danger').
Unique identifier for the badge element.
Icon to display at the start of the badge text.
Icon to display at the end of the badge text.
Whether to use Material Design style for icons.
CSS class for the icon font family.
Prefix for the icon font family.
Additional CSS classes to apply to the badge.
Inline styles to apply to the badge.
dataAttributes
Record<`data-${string}`, string | number | undefined | null | boolean>
Custom data attributes to add to the badge element.
Usage Examples
Basic Badge
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return <DBadge text="New" color="primary" />;
}
Color Variants
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex gap-2">
<DBadge text="Primary" color="primary" />
<DBadge text="Success" color="success" />
<DBadge text="Danger" color="danger" />
<DBadge text="Warning" color="warning" />
<DBadge text="Info" color="info" />
</div>
);
}
Soft Badges
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex gap-2">
<DBadge text="Soft Primary" color="primary" soft />
<DBadge text="Soft Success" color="success" soft />
<DBadge text="Soft Danger" color="danger" soft />
</div>
);
}
Rounded Pills
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex gap-2">
<DBadge text="14" color="primary" rounded />
<DBadge text="New" color="success" rounded />
<DBadge text="99+" color="danger" rounded />
</div>
);
}
With Icons
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex gap-2">
<DBadge
text="Verified"
color="success"
iconStart="check-circle-fill"
iconFamilyClass="bi"
/>
<DBadge
text="Download"
color="primary"
iconEnd="download"
iconFamilyClass="bi"
/>
</div>
);
}
Size Variants
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="d-flex align-items-center gap-2">
<DBadge text="Small" color="primary" size="sm" />
<DBadge text="Default" color="primary" />
<DBadge text="Large" color="primary" size="lg" />
</div>
);
}
Notification Badge
import { DBadge } from '@dynamic-framework/ui-react';
export default function Example() {
return (
<div className="position-relative" style={{ display: 'inline-block' }}>
<button className="btn btn-primary">
Messages
</button>
<DBadge
text="5"
color="danger"
rounded
size="sm"
style={{
position: 'absolute',
top: '-5px',
right: '-5px'
}}
/>
</div>
);
}