UI component reference

Reference pages for the components in @enmovil/ui-design-system version 0.1.6. Each page is generated from the component source and its Storybook stories, so the properties and examples match that release.

Component	Category	Description
DatePicker	Date&Time	Lets the user pick a single date, with optional time and week display and a list of quick selections. onDateChange reports the selected date as a string in format.
DateRangePicker	Date&Time	Lets the user pick a start and end date, with optional time and week display and a list of quick ranges such as "Last Month".
TimePicker	Date&Time	Lets the user pick a time of day. defaultTime sets the initial time in HH:mm:ss format, and onChange reports the selected time.
Accordion	General	A set of collapsible panels built from an items list. Each panel header expands or collapses its content, and onChange reports the keys of the open panels.
Badge	General	Shows a count or a dot badge over its children, such as an avatar or an icon. Use count for a number or showDot for a simple indicator.
Breadcrumbs	General	Shows a breadcrumb trail built from path, with an optional home icon and an area for actions on the right. Every crumb except the current one is a link, and onItemClick and onHomeClick fire before navigation so you can cancel it.
Button	General	A clickable button with Enmovil colour variants, visual types, sizes, a loading state and an optional icon.
ButtonGroup	General	A row of buttons where one option is selected at a time, built from an options list. onChange fires when the user picks an option, and the group can be spaced out or rounded.
Calendar	General	A full calendar view for browsing and selecting dates by month or year. It can show week numbers and custom content in date cells, and can be displayed inline instead of full size.
Captcha	General	A text captcha with a randomly generated code, an input for the answer and a reload button. It checks the answer when the input loses focus and reports the result through isValid.
Card	General	A content container with optional header, title and body sections (Card.Header, Card.Title and Card.Body). It comes in several colour tones and a compact spacing option.
Cascader	General	A select for choosing a value from a hierarchy, such as region, state and city, by drilling down level by level. It supports search, selecting several values, and choosing a parent level as the value.
Chart	General	A chart whose colours come from the design system. Pass a chart type and chart options; it also handles the height, custom series colours, a loading skeleton and an empty state.
Counter	General	Shows a row of KPI counters that count up to their value, with optional breakdowns, abbreviation (K/L/Cr or K/M/B), selection and drag-to-reorder.
Divider	General	A line that separates content, horizontally or vertically. A horizontal divider can carry a title, positioned with orientation.
Drawer	General	A panel that slides in from an edge of the screen. Open and close it with isOpen and onClose, and set the edge with placement.
Empty	General	A placeholder for when there is no data to show, with a simple image and an optional description.
FileUpload	General	Lets the user upload files, either by dragging them onto a drop area or with an upload button (variant). The drop area's text and icon can be customised, and onChange fires each time the upload changes.
FilterBar	General	A horizontal row that holds filter controls, with a right-aligned area for actions such as Reset and Apply. Wrap each labelled control in FilterItem.
Footer	General	An application footer showing the copyright line with the current year and an optional version number. It can be static, sticky or fixed, with its text aligned left, centre or right.
Gantt	General	A Gantt chart of rows, such as zones or sub-locations, with status-coloured bars for tasks. It has a today line, hover tooltips, an optional progress overlay and a day, week or month zoom.
Grid	General	A data grid for large or complex tables, with sorting, filtering, pagination and row selection. It can show a label and buttons that export the data to CSV or Excel.
Header	General	The application's top bar, with app and customer logos, a side-navigation toggle, a user menu and a theme toggle. It can also show page search and a notifications dropdown.
Icon	General	Renders an icon by name, with an optional colour, size, spin and rotation. An unknown name logs a warning and renders nothing.
KpiTile	General	A tile that shows one KPI: a label, a value, optional sub-text and an up, down or flat trend. Tiles come in several colour tones, become clickable when given onClick, and can be laid out with KpiGrid.
LoadingContainer	General	Provides an app-wide loading indicator. Wrap your app in LoadingContainer, then call useLoader().showLoader() and hideLoader() from any component inside it.
LoginCard	General	A complete sign-in screen covering login, OTP entry, forgotten and reset passwords, and setting a new password, selected with authStep. It can also show a captcha and a single sign-on button, and its layout and branding are configurable.
Map	General	A map that shows groups of markers, routes and geofences, with optional drawing tools and place search. It needs a Google Maps API key, passed in apiKey.
MessageButton	General	A button labelled "Show Message" that displays a fixed "Success!" message when clicked. Its style is set with variant.
Modal	General	A centred dialog with a title, your content and a footer of action buttons that you supply in actionButtons. Show it with open and handle closing in onCancel.
Notification	General	Shows notifications in a corner of the screen in info, success, warning or error styles. Call showNotification() from anywhere to display one; the Notification component itself renders a button that triggers it.
PageHeader	General	The title row at the top of a page, with an optional subtitle, a back link and action buttons. The title can include inline content such as badges or icons.
Popover	General	A button that opens a small popover with a title and placeholder content when it is hovered, focused or clicked (trigger). The popover content is fixed, so the component is mainly a demonstration.
Preview	General	An image gallery that opens images in a full-screen preview with a toolbar. Images come from imageList, and the toolbar can include a download button.
Progress	General	Shows progress as a bar or a circle, with a percentage, a status such as active or exception, and an optional custom colour.
Rating	General	A star rating input. It can allow half stars and clearing the rating, and reports changes through onChange.
Segmented	General	A segmented control for switching between a small set of options or views. Without options, it shows Daily, Weekly, Monthly, Quarterly and Yearly.
Select	General	A dropdown for choosing one or several options, with search, a clear button and a loading state. In multiple mode, selected values that don't fit collapse into a single tag that lists them in a tooltip, and children renders as a label above the field.
Sidebar	General	A collapsible side navigation menu built from menus. It uses a dark theme by default; pass theme="light" for a white background with teal accents.
Skeleton	General	Placeholder shapes shown while content loads. variant chooses a full layout (avatar, title and paragraph rows) or a single element such as an avatar, button, input or image.
Slider	General	Lets the user pick a single value or a range (mode) by dragging a handle along a track. It supports steps, marks, a vertical layout and a reversed direction.
Spin	General	A small loading spinner. It takes no properties.
StatusBadge	General	A coloured status pill. Its tone is picked automatically from common status strings, and you can override the tone, add a leading dot or change the label.
Stepper	General	Shows progress through a series of steps, horizontally or vertically. Set the current step with selected; with isClickable, users can click a step and onChange reports its index. Also exported as StepsVertical.
Switch	General	An on/off toggle with Enmovil colour variants. It can show labels inside the switch for the on and off states.
Table	General	A table for small datasets, with a scrollable body and fixed columns. Its row type is currently fixed to key, name, age and address, so use Grid for real data.
Tabs	General	Tab navigation built from an items list, where each tab can show a count badge next to its label. Set the tab that opens first with defaultActiveKey.
Tags	General	A small tag that shows a label with an optional status icon, such as a check, clock or close icon, chosen with iconType.
Timeline	General	A vertical timeline of events built from items. Events can alternate sides, use custom colours and contain rich content.
ToastContainer	General	Shows short toast messages in info, success, error or warning styles. Render ToastContainer once, then call showToast() from anywhere with a message, type and duration.
Tooltip	General	Shows a short text tip when the user hovers over its children. Set where it appears with placement, and hide the arrow with isArrow.
Checkbox	Input	A group of checkboxes built from an items list, laid out horizontally or vertically. Each item's checked value sets whether it is ticked, and onChange reports the keys of the ticked items.
Input	Input	A single-line text input with Enmovil sizing (middle by default) and validation states through status. It supports content before and after the field, a suffix and a clear button.
OtpInput	Input	A row of boxes for entering a one-time password, one character per box. Set the number of boxes with length; onChange fires once every box is filled.
Radio	Input	A group of radio buttons built from an items list, laid out horizontally or vertically. defaultValue sets the initially selected item, and onChange fires when the selection changes.
TextArea	Input	A multi-line text input. Its height can be fixed with rows or follow the content with autoSize, and it can show a character count and a clear button.