mObywatel Design System

Komponenty

Biblioteka komponentów UI

Wszystkie komponenty dostępne w kodzie źródłowym aplikacji mObywatel na platformę Android (Jetpack Compose).

🔘

Button

Przyciski w wariantach Primary, Secondary i Tertiary. Rozmiary Large i Small z obsługą ikon.

Button.kt

📋

Header

Nagłówek ekranu z tytułem, podtytułem i opcjonalnymi akcjami nawigacyjnymi.

Header.kt

⚠️

Alert

Komunikaty alertów informacyjnych, ostrzeżeń i błędów z ikonami i działaniami.

alert/

🏷️

Badge

Odznaki statusu i powiadomień – liczbowe i tekstowe w różnych wariantach kolorystycznych.

badge/

🎴

Card / CardList

Karty pojedyncze i listy kart do prezentacji danych dokumentów i usług.

cardlist/

☑️

Checkbox

Pola wyboru z etykietami i obsługą stanów: zaznaczone, niezaznaczone, częściowe, wyłączone.

checkbox/

📅

DatePicker

Selektor daty z obsługą zakresów i walidacją formatu zgodną z polskimi standardami.

datepicker/

💬

Dialog

Okna dialogowe z tytułem, treścią i przyciskami akcji. Obsługa modalna i niemodalana.

dialog/

📁

FilePicker

Komponent wyboru plików z drag & drop i podglądem wybranych plików.

filepicker/

🔍

SearchBar

Pasek wyszukiwania z filtrowaniem w czasie rzeczywistym i obsługą stanu pustego.

searchbar/

🔄

ProgressBar

Pasek postępu liniowy i kołowy do wizualizacji postępu operacji i ładowania.

progressbar/

🔔

Snackbar

Krótkie powiadomienia wyświetlane na dole ekranu z opcjonalnym przyciskiem akcji.

snackbar/

Kolory

Paleta kolorów

System kolorów zaczerpnięty bezpośrednio z kodu źródłowego AppTheme mObywatela.

Primary 900

#1a3c6e

Primary Light

#2557a7

Secondary 900

#00b4d8

Support Red 100

#e8325a

Support Yellow

#ffd166

Support Green

#06d6a0

Neutral 60

#64748b

Neutral 30

#e2e8f0

mObywatelDesign System

Biblioteka komponentów UI

Paleta kolorów

Podgląd interfejsu

mObywatel
Design System