Colors
#Semantic colors
On top of the base coloring of texts and backgrounds from Tailwind, 8 "semantic" colors are defined under special keywords: neutral (DaisyUI only), primary, secondary, accent, info, success, warning and error. The actual color they represent is defined in a theme and 2 themes are often applied on a website, with a light/dark toggle. All 8 colors, together, are usually more than enough to style any website; in fact, using more comes with the risk of having an inconsistent interface.
Most components use the color attribute to style themselves and their children.
1<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[auto_auto_1fr_1fr] items-center gap-x-4 gap-y-2 w-full p-2 rounded-md" aria-hidden="true" data-theme="light">
2
3 <x-badge>Default</x-badge>
4 <div class="flex flex-wrap gap-1">
5 <x-checkbox onclick="return false;"/>
6 <x-checkbox onclick="return false;" checked/>
7 <x-radio onclick="return false;"/>
8 <x-radio onclick="return false;" checked/>
9 <x-toggle onclick="return false;"/>
10 <x-toggle onclick="return false;" checked/>
11 </div>
12 <x-input placeholder="Input with no semantic color"/>
13 <x-select placeholder="Select your favorite color" multiple>
14 <option value="default" selected>Default</option>
15 <option value="neutral">Neutral</option>
16 <option value="primary">Primary</option>
17 <option value="secondary">Secondary</option>
18 <option value="accent">Accent</option>
19 <option value="info">Info</option>
20 <option value="success">Success</option>
21 <option value="warning">Warning</option>
22 <option value="error">Error</option>
23 </x-select>
24
25 <x-badge color="neutral"><pre><code>color="neutral"</code></pre></x-badge>
26 <div class="flex flex-wrap gap-1">
27 <x-checkbox onclick="return false;" color="neutral"/>
28 <x-checkbox onclick="return false;" color="neutral" checked/>
29 <x-radio onclick="return false;" color="neutral"/>
30 <x-radio onclick="return false;" color="neutral" checked/>
31 <x-toggle onclick="return false;" color="neutral"/>
32 <x-toggle onclick="return false;" color="neutral" checked/>
33 </div>
34 <x-input color="neutral" placeholder="Input with neutral semantic color"/>
35 <x-select color="neutral" placeholder="Select your favorite color" multiple>
36 <option value="neutral" selected>Neutral</option>
37 <option value="primary">Primary</option>
38 <option value="secondary">Secondary</option>
39 <option value="accent">Accent</option>
40 <option value="info">Info</option>
41 <option value="success">Success</option>
42 <option value="warning">Warning</option>
43 <option value="error">Error</option>
44 </x-select>
45
46 <x-badge color="primary"><pre><code>color="primary"</code></pre></x-badge>
47 <div class="flex flex-wrap gap-1">
48 <x-checkbox onclick="return false;" color="primary"/>
49 <x-checkbox onclick="return false;" color="primary" checked/>
50 <x-radio onclick="return false;" color="primary"/>
51 <x-radio onclick="return false;" color="primary" checked/>
52 <x-toggle onclick="return false;" color="primary"/>
53 <x-toggle onclick="return false;" color="primary" checked/>
54 </div>
55 <x-input color="primary" placeholder="Input with primary semantic color"/>
56 <x-select color="primary" placeholder="Select your favorite color" multiple>
57 <option value="neutral">Neutral</option>
58 <option value="primary" selected>Primary</option>
59 <option value="secondary">Secondary</option>
60 <option value="accent">Accent</option>
61 <option value="info">Info</option>
62 <option value="success">Success</option>
63 <option value="warning">Warning</option>
64 <option value="error">Error</option>
65 </x-select>
66
67 <x-badge color="secondary"><pre><code>color="secondary"</code></pre></x-badge>
68 <div class="flex flex-wrap gap-1">
69 <x-checkbox onclick="return false;" color="secondary"/>
70 <x-checkbox onclick="return false;" color="secondary" checked/>
71 <x-radio onclick="return false;" color="secondary"/>
72 <x-radio onclick="return false;" color="secondary" checked/>
73 <x-toggle onclick="return false;" color="secondary"/>
74 <x-toggle onclick="return false;" color="secondary" checked/>
75 </div>
76 <x-input color="secondary" placeholder="Input with secondary semantic color"/>
77 <x-select color="secondary" placeholder="Select your favorite color" multiple>
78 <option value="neutral">Neutral</option>
79 <option value="primary">Primary</option>
80 <option value="secondary" selected>Secondary</option>
81 <option value="accent">Accent</option>
82 <option value="info">Info</option>
83 <option value="success">Success</option>
84 <option value="warning">Warning</option>
85 <option value="error">Error</option>
86 </x-select>
87
88 <x-badge color="accent"><pre><code>color="accent"</code></pre></x-badge>
89 <div class="flex flex-wrap gap-1">
90 <x-checkbox onclick="return false;" color="accent"/>
91 <x-checkbox onclick="return false;" color="accent" checked/>
92 <x-radio onclick="return false;" color="accent"/>
93 <x-radio onclick="return false;" color="accent" checked/>
94 <x-toggle onclick="return false;" color="accent"/>
95 <x-toggle onclick="return false;" color="accent" checked/>
96 </div>
97 <x-input color="accent" placeholder="Input with accent semantic color"/>
98 <x-select color="accent" placeholder="Select your favorite color" multiple>
99 <option value="neutral">Neutral</option>
100 <option value="primary">Primary</option>
101 <option value="secondary">Secondary</option>
102 <option value="accent" selected>Accent</option>
103 <option value="info">Info</option>
104 <option value="success">Success</option>
105 <option value="warning">Warning</option>
106 <option value="error">Error</option>
107 </x-select>
108
109 <x-badge color="info"><pre><code>color="info"</code></pre></x-badge>
110 <div class="flex flex-wrap gap-1">
111 <x-checkbox onclick="return false;" color="info"/>
112 <x-checkbox onclick="return false;" color="info" checked/>
113 <x-radio onclick="return false;" color="info"/>
114 <x-radio onclick="return false;" color="info" checked/>
115 <x-toggle onclick="return false;" color="info"/>
116 <x-toggle onclick="return false;" color="info" checked/>
117 </div>
118 <x-input color="info" placeholder="Input with info semantic color"/>
119 <x-select color="info" placeholder="Select your favorite color" multiple>
120 <option value="neutral">Neutral</option>
121 <option value="primary">Primary</option>
122 <option value="secondary">Secondary</option>
123 <option value="accent">Accent</option>
124 <option value="info" selected>Info</option>
125 <option value="success">Success</option>
126 <option value="warning">Warning</option>
127 <option value="error">Error</option>
128 </x-select>
129
130 <x-badge color="success"><pre><code>color="success"</code></pre></x-badge>
131 <div class="flex flex-wrap gap-1">
132 <x-checkbox onclick="return false;" color="success"/>
133 <x-checkbox onclick="return false;" color="success" checked/>
134 <x-radio onclick="return false;" color="success"/>
135 <x-radio onclick="return false;" color="success" checked/>
136 <x-toggle onclick="return false;" color="success"/>
137 <x-toggle onclick="return false;" color="success" checked/>
138 </div>
139 <x-input color="success" placeholder="Input with success semantic color"/>
140 <x-select color="success" placeholder="Select your favorite color" multiple>
141 <option value="neutral">Neutral</option>
142 <option value="primary">Primary</option>
143 <option value="secondary">Secondary</option>
144 <option value="accent">Accent</option>
145 <option value="info">Info</option>
146 <option value="success" selected>Success</option>
147 <option value="warning">Warning</option>
148 <option value="error">Error</option>
149 </x-select>
150
151 <x-badge color="warning"><pre><code>color="warning"</code></pre></x-badge>
152 <div class="flex flex-wrap gap-1">
153 <x-checkbox onclick="return false;" color="warning"/>
154 <x-checkbox onclick="return false;" color="warning" checked/>
155 <x-radio onclick="return false;" color="warning"/>
156 <x-radio onclick="return false;" color="warning" checked/>
157 <x-toggle onclick="return false;" color="warning"/>
158 <x-toggle onclick="return false;" color="warning" checked/>
159 </div>
160 <x-input color="warning" placeholder="Input with warning semantic color"/>
161 <x-select color="warning" placeholder="Select your favorite color" multiple>
162 <option value="neutral">Neutral</option>
163 <option value="primary">Primary</option>
164 <option value="secondary">Secondary</option>
165 <option value="accent">Accent</option>
166 <option value="info">Info</option>
167 <option value="success">Success</option>
168 <option value="warning" selected>Warning</option>
169 <option value="error">Error</option>
170 </x-select>
171
172 <x-badge color="error"><pre><code>color="error"</code></pre></x-badge>
173 <div class="flex flex-wrap gap-1">
174 <x-checkbox onclick="return false;" color="error"/>
175 <x-checkbox onclick="return false;" color="error" checked/>
176 <x-radio onclick="return false;" color="error"/>
177 <x-radio onclick="return false;" color="error" checked/>
178 <x-toggle onclick="return false;" color="error"/>
179 <x-toggle onclick="return false;" color="error" checked/>
180 </div>
181 <x-input color="error" placeholder="Input with error semantic color"/>
182 <x-select color="error" placeholder="Select your favorite color" multiple>
183 <option value="neutral">Neutral</option>
184 <option value="primary">Primary</option>
185 <option value="secondary">Secondary</option>
186 <option value="accent">Accent</option>
187 <option value="info">Info</option>
188 <option value="success">Success</option>
189 <option value="warning">Warning</option>
190 <option value="error" selected>Error</option>
191 </x-select>
192
193</div>
1<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-[auto_auto_1fr_1fr] items-center gap-x-4 gap-y-2 w-full p-2 rounded-md" aria-hidden="true" data-theme="dark">
2
3 <x-badge>Default</x-badge>
4 <div class="flex flex-wrap gap-1">
5 <x-checkbox onclick="return false;"/>
6 <x-checkbox onclick="return false;" checked/>
7 <x-radio onclick="return false;"/>
8 <x-radio onclick="return false;" checked/>
9 <x-toggle onclick="return false;"/>
10 <x-toggle onclick="return false;" checked/>
11 </div>
12 <x-input placeholder="Input with no semantic color"/>
13 <x-select placeholder="Select your favorite color" multiple>
14 <option value="default" selected>Default</option>
15 <option value="neutral">Neutral</option>
16 <option value="primary">Primary</option>
17 <option value="secondary">Secondary</option>
18 <option value="accent">Accent</option>
19 <option value="info">Info</option>
20 <option value="success">Success</option>
21 <option value="warning">Warning</option>
22 <option value="error">Error</option>
23 </x-select>
24
25 <x-badge color="neutral"><pre><code>color="neutral"</code></pre></x-badge>
26 <div class="flex flex-wrap gap-1">
27 <x-checkbox onclick="return false;" color="neutral"/>
28 <x-checkbox onclick="return false;" color="neutral" checked/>
29 <x-radio onclick="return false;" color="neutral"/>
30 <x-radio onclick="return false;" color="neutral" checked/>
31 <x-toggle onclick="return false;" color="neutral"/>
32 <x-toggle onclick="return false;" color="neutral" checked/>
33 </div>
34 <x-input color="neutral" placeholder="Input with neutral semantic color"/>
35 <x-select color="neutral" placeholder="Select your favorite color" multiple>
36 <option value="neutral" selected>Neutral</option>
37 <option value="primary">Primary</option>
38 <option value="secondary">Secondary</option>
39 <option value="accent">Accent</option>
40 <option value="info">Info</option>
41 <option value="success">Success</option>
42 <option value="warning">Warning</option>
43 <option value="error">Error</option>
44 </x-select>
45
46 <x-badge color="primary"><pre><code>color="primary"</code></pre></x-badge>
47 <div class="flex flex-wrap gap-1">
48 <x-checkbox onclick="return false;" color="primary"/>
49 <x-checkbox onclick="return false;" color="primary" checked/>
50 <x-radio onclick="return false;" color="primary"/>
51 <x-radio onclick="return false;" color="primary" checked/>
52 <x-toggle onclick="return false;" color="primary"/>
53 <x-toggle onclick="return false;" color="primary" checked/>
54 </div>
55 <x-input color="primary" placeholder="Input with primary semantic color"/>
56 <x-select color="primary" placeholder="Select your favorite color" multiple>
57 <option value="neutral">Neutral</option>
58 <option value="primary" selected>Primary</option>
59 <option value="secondary">Secondary</option>
60 <option value="accent">Accent</option>
61 <option value="info">Info</option>
62 <option value="success">Success</option>
63 <option value="warning">Warning</option>
64 <option value="error">Error</option>
65 </x-select>
66
67 <x-badge color="secondary"><pre><code>color="secondary"</code></pre></x-badge>
68 <div class="flex flex-wrap gap-1">
69 <x-checkbox onclick="return false;" color="secondary"/>
70 <x-checkbox onclick="return false;" color="secondary" checked/>
71 <x-radio onclick="return false;" color="secondary"/>
72 <x-radio onclick="return false;" color="secondary" checked/>
73 <x-toggle onclick="return false;" color="secondary"/>
74 <x-toggle onclick="return false;" color="secondary" checked/>
75 </div>
76 <x-input color="secondary" placeholder="Input with secondary semantic color"/>
77 <x-select color="secondary" placeholder="Select your favorite color" multiple>
78 <option value="neutral">Neutral</option>
79 <option value="primary">Primary</option>
80 <option value="secondary" selected>Secondary</option>
81 <option value="accent">Accent</option>
82 <option value="info">Info</option>
83 <option value="success">Success</option>
84 <option value="warning">Warning</option>
85 <option value="error">Error</option>
86 </x-select>
87
88 <x-badge color="accent"><pre><code>color="accent"</code></pre></x-badge>
89 <div class="flex flex-wrap gap-1">
90 <x-checkbox onclick="return false;" color="accent"/>
91 <x-checkbox onclick="return false;" color="accent" checked/>
92 <x-radio onclick="return false;" color="accent"/>
93 <x-radio onclick="return false;" color="accent" checked/>
94 <x-toggle onclick="return false;" color="accent"/>
95 <x-toggle onclick="return false;" color="accent" checked/>
96 </div>
97 <x-input color="accent" placeholder="Input with accent semantic color"/>
98 <x-select color="accent" placeholder="Select your favorite color" multiple>
99 <option value="neutral">Neutral</option>
100 <option value="primary">Primary</option>
101 <option value="secondary">Secondary</option>
102 <option value="accent" selected>Accent</option>
103 <option value="info">Info</option>
104 <option value="success">Success</option>
105 <option value="warning">Warning</option>
106 <option value="error">Error</option>
107 </x-select>
108
109 <x-badge color="info"><pre><code>color="info"</code></pre></x-badge>
110 <div class="flex flex-wrap gap-1">
111 <x-checkbox onclick="return false;" color="info"/>
112 <x-checkbox onclick="return false;" color="info" checked/>
113 <x-radio onclick="return false;" color="info"/>
114 <x-radio onclick="return false;" color="info" checked/>
115 <x-toggle onclick="return false;" color="info"/>
116 <x-toggle onclick="return false;" color="info" checked/>
117 </div>
118 <x-input color="info" placeholder="Input with info semantic color"/>
119 <x-select color="info" placeholder="Select your favorite color" multiple>
120 <option value="neutral">Neutral</option>
121 <option value="primary">Primary</option>
122 <option value="secondary">Secondary</option>
123 <option value="accent">Accent</option>
124 <option value="info" selected>Info</option>
125 <option value="success">Success</option>
126 <option value="warning">Warning</option>
127 <option value="error">Error</option>
128 </x-select>
129
130 <x-badge color="success"><pre><code>color="success"</code></pre></x-badge>
131 <div class="flex flex-wrap gap-1">
132 <x-checkbox onclick="return false;" color="success"/>
133 <x-checkbox onclick="return false;" color="success" checked/>
134 <x-radio onclick="return false;" color="success"/>
135 <x-radio onclick="return false;" color="success" checked/>
136 <x-toggle onclick="return false;" color="success"/>
137 <x-toggle onclick="return false;" color="success" checked/>
138 </div>
139 <x-input color="success" placeholder="Input with success semantic color"/>
140 <x-select color="success" placeholder="Select your favorite color" multiple>
141 <option value="neutral">Neutral</option>
142 <option value="primary">Primary</option>
143 <option value="secondary">Secondary</option>
144 <option value="accent">Accent</option>
145 <option value="info">Info</option>
146 <option value="success" selected>Success</option>
147 <option value="warning">Warning</option>
148 <option value="error">Error</option>
149 </x-select>
150
151 <x-badge color="warning"><pre><code>color="warning"</code></pre></x-badge>
152 <div class="flex flex-wrap gap-1">
153 <x-checkbox onclick="return false;" color="warning"/>
154 <x-checkbox onclick="return false;" color="warning" checked/>
155 <x-radio onclick="return false;" color="warning"/>
156 <x-radio onclick="return false;" color="warning" checked/>
157 <x-toggle onclick="return false;" color="warning"/>
158 <x-toggle onclick="return false;" color="warning" checked/>
159 </div>
160 <x-input color="warning" placeholder="Input with warning semantic color"/>
161 <x-select color="warning" placeholder="Select your favorite color" multiple>
162 <option value="neutral">Neutral</option>
163 <option value="primary">Primary</option>
164 <option value="secondary">Secondary</option>
165 <option value="accent">Accent</option>
166 <option value="info">Info</option>
167 <option value="success">Success</option>
168 <option value="warning" selected>Warning</option>
169 <option value="error">Error</option>
170 </x-select>
171
172 <x-badge color="error"><pre><code>color="error"</code></pre></x-badge>
173 <div class="flex flex-wrap gap-1">
174 <x-checkbox onclick="return false;" color="error"/>
175 <x-checkbox onclick="return false;" color="error" checked/>
176 <x-radio onclick="return false;" color="error"/>
177 <x-radio onclick="return false;" color="error" checked/>
178 <x-toggle onclick="return false;" color="error"/>
179 <x-toggle onclick="return false;" color="error" checked/>
180 </div>
181 <x-input color="error" placeholder="Input with error semantic color"/>
182 <x-select color="error" placeholder="Select your favorite color" multiple>
183 <option value="neutral">Neutral</option>
184 <option value="primary">Primary</option>
185 <option value="secondary">Secondary</option>
186 <option value="accent">Accent</option>
187 <option value="info">Info</option>
188 <option value="success">Success</option>
189 <option value="warning">Warning</option>
190 <option value="error" selected>Error</option>
191 </x-select>
192
193</div>