DISCLAIMER: This component is in
Beta
status. That means that it is ready for production, but the API might change.Badge
Displays a badge or a component that looks like a badge.
Installation
Run the following cli command or copy/paste the component code into your project
Examples
Primary
Badge
import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';
export default component$(() => {
return <Badge>Badge</Badge>;
});
Secondary
Badge
import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';
export default component$(() => {
return <Badge look="secondary">Badge</Badge>;
});
Alert
Badge
import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';
export default component$(() => {
return <Badge look="alert">Badge</Badge>;
});
Outline
Badge
import { component$ } from '@builder.io/qwik';
import { Badge } from '~/components/ui';
export default component$(() => {
return <Badge look="outline">Badge</Badge>;
});