Елементи інтерфейсу

Buttons

A page's main action is btn-primary. Every other button is btn-surface. A button that is only an icon is btn-ghost, the icon alone. A neutral btn-outline is not used; a coloured one is.

Roles

btn btn-primary

btn btn-surface

btn btn-ghost

btn btn-link

With an icon

btn btn-primary + .icon size-5

btn btn-surface + .icon size-5

btn btn-surface btn-sm + .icon size-4

Only an icon

btn btn-ghost btn-circle

btn btn-ghost btn-square

btn btn-primary btn-square

<.back_link href={home_path()} /> (every page's Back)

Sizes

btn btn-surface btn-xs

btn btn-surface btn-sm

btn btn-surface btn-md

btn btn-surface btn-lg

States

btn btn-primary disabled

btn btn-surface disabled

btn btn-surface btn-active

btn btn-primary + loading loading-spinner

Colours

btn btn-secondary

btn btn-accent

btn btn-neutral

btn btn-info

btn btn-success

btn btn-warning

btn btn-error

Soft and coloured outline

btn btn-soft btn-primary

btn btn-soft btn-info

btn btn-soft btn-success

btn btn-soft btn-warning

btn btn-soft btn-error

btn btn-outline btn-error

Badges

A short label beside something, never instead of a button. The Pro badge is badge badge-primary badge-xs.

Colours

Badge

badge

Badge

badge badge-primary

Badge

badge badge-secondary

Badge

badge badge-accent

Badge

badge badge-neutral

Badge

badge badge-info

Badge

badge badge-success

Badge

badge badge-warning

Badge

badge badge-error

Styles and sizes

A1

badge badge-soft badge-success

Badge

badge badge-outline

Pro

badge badge-primary badge-xs

Pro

badge badge-primary badge-sm

Pro

badge badge-primary badge-md

Pro

badge badge-primary badge-lg

Forms

An icon inside a box sits before the input with z-10: daisyUI's input is positioned and paints over anything before it.

Text

input

<.search_input label=…>

<.search_input close={…} close_label=…>

input input-error

textarea

Choices

select

Remember me

checkbox

One

radio

Sound

toggle

range range-primary

Alerts

One line on something the reader has to know now.

A new version is out.

alert alert-info

Saved.

alert alert-success

One test left today.

alert alert-warning

The map could not be loaded.

alert alert-error

Surfaces

Something set on the page is a <.panel>; something set into a panel is base-200; nothing yet is an <.empty_state>.

Capital

București

<.panel title=…>

In a list or a sidebar

<.panel compact>

A tile set into a panel

rounded-lg bg-base-200 p-3

No tests yet

Pick a level, then press Start test.

<.empty_state title=… text=…>

Log in to keep this result.

<.empty_state compact>

A card

With a title and actions.

card border border-base-300 bg-base-100

Widths

A page is the layout's column: the default, or <Layouts.app wide> for a page with its own side columns. Anything narrower (a form, a game board, an article, a whole login page) is max-w-narrow, centred with mx-auto. There is no other width.

48rem: the column's own width at md, so it narrows a page only from lg up.

mx-auto max-w-narrow

Colours

The theme's colours. Use the name, never a hex: each theme sets its own.

Theme

bg-primary

bg-secondary

bg-accent

bg-neutral

bg-info

bg-success

bg-warning

bg-error

bg-base-100

bg-base-200

bg-base-300

bg-base-content

Text

Aa

text-base-content

Aa

text-muted

Text is text-base-content, or text-muted for a detail. No text-base-content/NN of a page's own: anything lighter reads below 4.5:1 on the light theme. An opacity on a box fades the text in it too, so a muted line inside a faded box falls under it.

Type

A page has one title, <.page_title>. Every heading under it is an <.eyebrow>: a section of the page (tag="h2"), a panel's title (<.panel title=…>), a group inside either. A subtitle says less than the title, so it is never a size of its own.

Explore

<.page_title> (a page's h1)

Feedback

Something is happening, or how far along it is.

Progress

loading loading-spinner

loading loading-dots

progress progress-primary

Tabs and menus

Words Tests Map

tabs tabs-box

dropdown + menu dropdown-content