Forms and buttons

Transparent button .btn-clear

No fill, no border at rest; an accent tint on hover, focus and press. Compare with .btn-ghost, which keeps the theme's chrome and hovers to a solid surface.

Transparent icon button .btn-icon.is-clear

Icon and label

Icon before or after the label (just the markup order), at both button sizes. Icon buttons are the same height as text buttons.

Split button .btn-split

Floating action button .fab

Fixed to the screen corner and clear of the safe area. Shown here with .is-contained inside a box.

Toggle group .toggle-group

Notification dot and count .has-badge

Validation states .is-valid, .is-validated

Explicit classes, or native :user-valid / :user-invalid once the user has touched a field in an .is-validated form. Only required fields turn green; .field-valid shows while the control is valid.

Floating labels .field.is-floating

The label sits inside the control and floats up on focus or once there is a value. Controls need placeholder=" "; a select always floats.

Leading icon and clear button .input-icon, .input-clear

Search field

Date picker (native)

Calendar month grid .calendar

For apps that render their own picker: today (outlined), selected, a range (start, middle, end), disabled (struck through) and days from the next and previous months.

Time picker (native)

Date range

Combobox .combobox and .listbox

Tag input .tag-input

Number stepper .stepper

Dual-handle range slider .slider.is-range

Rating .rating

Colour swatches .swatches

Upload queue .file-list