Newer
Older
import { Badge, Link, Content } from "@onegeo/gatsby-theme-onegeo"
return (
<Content>
<div className="prose">
<Link to="/doc/core">Retour</Link>
<h1>Badge</h1>
<h2>Props</h2>
<div className="mockup-code">
<pre>
<code>
{`interface Props {
children?: React.ReactNode;
title?: string;
className?: string;
}`}
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<h2>Example</h2>
</div>
<div className="flex gap-6 m-4">
<h2>Badge with brand colors</h2>
<Badge title="A Badge..." className="" />
<Badge title="A Primary Badge..." className="badge-primary" />
<Badge
title="A Secondary Badge..."
className="badge-secondary"
/>
<Badge title="An Accent Badge..." className="badge-accent" />
<Badge className="badge-ghost"> A Ghost Badge </Badge>
</div>
<div className="flex gap-6 m-4">
<h2>Outline badge :</h2>
<Badge title="A Badge..." className="badge-outline" />
<Badge
title="A Primary Badge..."
className="badge-primary badge-outline"
/>
<Badge
title="A Secondary Badge..."
className="badge-secondary badge-outline"
/>
<Badge
title="An Accent Badge..."
className="badge-accent badge-outline"
/>
<Badge className="badge-ghost badge-outline">
{" "}
A Ghost Badge{" "}
</Badge>
</div>
<div className="flex gap-6 m-4">
<h2>Badge sizes :</h2>
<Badge title="987,654" className="badge-lg" />
<Badge title="987,654" className="badge-md" />
<Badge title="987,654" className="badge-sm" />
<Badge className="badge-xs"> 987,654 </Badge>
</div>
<div className="prose">
<h2>More example</h2>
<a href="https://daisyui.com/components/badge/">Daisy UI</a>
</div>
</Content>
)