Badge
Used to retrieve user input.
Props
color
"accent" | "gray" | "blue" | "pink" | "red" | "amber" | "green"import * as React from "react";
import { Badge } from "basics";
export default () => {
return <Badge color="accent">Pending</Badge>;
}
Showcase
<Flex gap="16" direction="column" align="center">
<Flex gap="16">
<Badge color="accent" variant="solid">
<CheckIcon />
Approved
</Badge>
<Badge color="green" variant="solid">
<CheckIcon />
Approved
</Badge>
<Badge color="pink" variant="solid">
<LinkIcon />
Winner
</Badge>
</Flex>
<Flex gap="16">
<Badge color="red" variant="solid">
<DBErrorIcon />
Failed
</Badge>
<Badge color="amber" variant="solid">
<RotateCWIcon />
Pending
</Badge>
<Badge color="gray" variant="solid">
<QuestionIcon />
Unknown
</Badge>
</Flex>
</Flex>