Presago Design System

Box

Contenitore generico. Mantine: <Box>

Sono un Box

<div class="presago-box">Sono un Box</div>

Stack

Flex verticale. Mantine: <Stack>

Item 1

Item 2

Item 3

<div class="presago-stack" data-gap="md">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

Inline

Flex orizzontale. Mantine: <Group>

A

B

C

<div class="presago-inline" data-gap="md">
  <div>A</div><div>B</div>
</div>

Flex

Flex con controllo completo. Mantine: <Flex>

Start

Center

End

<div class="presago-flex" data-justify="between" data-align="center" data-gap="md">
  …
</div>

Text & Span

Mantine: <Text>

Testo default con una parola in semibold e una parola brand.

<p class="presago-text">Testo <span class="presago-span" data-fw="semibold">bold</span></p>

Link

Mantine: <Anchor>

Visita la checklist a11y.

<a class="presago-link" href="…">checklist a11y</a>

Image

Mantine: <Image>

<img class="presago-image" data-radius="md" src="…" alt="…">

Button

Mantine: <Button>

Variant Color Size disabled loading

IconButton

Mantine: <ActionIcon> — aria-label obbligatorio

<button class="presago-icon-button" aria-label="Modifica">
  <svg aria-hidden="true">…</svg>
</button>

TextInput

Mantine: <TextInput>

Email

Useremo questa email per le notifiche.

Password

Minimo 8 caratteri

<label class="presago-field__label" for="email">Email</label>
<div class="presago-text-input__wrapper">
  <input type="email" class="presago-text-input" id="email">
</div>

TextArea

Mantine: <Textarea>

Note

<textarea class="presago-text-area" id="notes"></textarea>

Select

Mantine: <Select> (qui versione native per zero-dep)

Team

<select class="presago-select" id="team">
  <option>Engineering</option>
</select>

CheckBox

Mantine: <Checkbox>

Selezionato Indeterminate (stato misto) Non selezionato Disabilitato

<label class="presago-checkbox">
  <input type="checkbox" class="presago-checkbox__input">
  <span class="presago-checkbox__label">Accetta</span>
</label>

RadioGroup

Mantine: <Radio.Group>

Ambiente Development Staging Production

<fieldset class="presago-radio-group">
  <legend class="presago-radio-group__legend">Ambiente</legend>
  <label class="presago-radio">
    <input type="radio" class="presago-radio__input" name="env">
    <span class="presago-radio__label">Dev</span>
  </label>
</fieldset>

Toggle

Mantine: <Switch>

Notifiche push Beta features Modalità admin (disabilitato)

<label class="presago-toggle">
  <input type="checkbox" class="presago-toggle__input">
  <span class="presago-toggle__label">Notifiche</span>
</label>

Spinner

Mantine: <Loader> — statico con prefers-reduced-motion

<span class="presago-spinner" role="status" aria-label="Caricamento"></span>

Heading

Mantine: <Title order={1..6}>

Heading level 1

Heading level 3

Heading level 5

<h1 class="presago-heading" data-level="1">Titolo</h1>

Icon (Beta)

Wrapper presentational per SVG

<span class="presago-icon" data-color="success" aria-hidden="true">
  <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
</span>

Primitives

Box