components.
flora components have no colour of their own. on BG sites, like this one, they're black and white. inside a product we build for others, they take on that product's colour. drag the hue above to try it.
core.
button · icon button · badge · tag · card · tooltip · avatar group
button
one primary per view, secondary for the rest, ghost inside dense ui, danger only for destructive confirms.
32 / 40 / 48 tall, matching the control scale.
loading swaps the left icon for a spinner. href renders an anchor with identical styling.
icon button
always pass a label — it is the accessible name and the native tooltip. ghost by default, outline in empty areas, filled for the one accent action.
badge
a version, a state, a count. not clickable — use a tag for that. semantic tones are for status only, never decoration.
tag
a tag either toggles or removes, never both. try both rows.
card
cards have borders, not shadows. only interactive ones lift.
raised
a bordered surface on the page.
sunken
tinted, no border. for nested panels.
accent
tinted with the product's colour. use it sparingly.
interactive
lifts 2px and gains a shadow on hover.
tooltip
dark on light (and the reverse), one short line, with an optional shortcut. the third one stays open so you can see it.
avatar group
the stack fans out on hover.
copyable text
an id, a token, a secret. for multi-line code use a code block instead.