# noora v0.68.0 - Table of Contents

A component library for Phoenix LiveView applications

## Pages

- [Changelog](changelog.md)

## Modules

- [Noora](Noora.md): 
- [Noora.Alert](Noora.Alert.md): An alert component.
- [Noora.Avatar](Noora.Avatar.md): A component for rendering an avatar image or initials if an image is not available.
- [Noora.Badge](Noora.Badge.md): Renders a customizable badge component with various styles, colors, sizes, and optional icons or status indicators.

- [Noora.Banner](Noora.Banner.md): Renders a customizable banner component for displaying messages with different statuses (primary, error, success, warning, information), optional descriptions, and dismissible functionality. Supports a custom icon when the status is primary.
- [Noora.Breadcrumbs](Noora.Breadcrumbs.md): Renders a breadcrumbs component with.
- [Noora.Button](Noora.Button.md): A component for rendering both standard buttons and link-style buttons, offering flexible styling options for variants, sizes, and icon placement.

- [Noora.ButtonGroup](Noora.ButtonGroup.md): ButtonGroup component for Noora UI.
- [Noora.Card](Noora.Card.md): A card component, used to separate content into sections.
- [Noora.Chart](Noora.Chart.md): A powerful charting component powered by ECharts.
- [Noora.Checkbox](Noora.Checkbox.md): An input checkbox.
- [Noora.DatePicker](Noora.DatePicker.md): A date range picker component with preset options and custom selection.
- [Noora.DismissIcon](Noora.DismissIcon.md): Renders a dismiss icon button for closing or removing elements, with customizable size.
- [Noora.Dropdown](Noora.Dropdown.md): Renders a customizable dropdown component with a trigger, menu, and item options, supporting icons, labels, and event handling.
- [Noora.Filter](Noora.Filter.md): A comprehensive filtering system with dropdown and active filter components.
- [Noora.Filter.Filter](Noora.Filter.Filter.md): Represents a filter configuration with its current state.
## Fields
- `:id` - Unique identifier for the filter
- `:display_name` - Human-readable name shown in the UI
- `:type` - Filter type (`:text`, `:number`, or `:option`)
- `:options` - List of available options (for `:option` type only)
- `:options_display_names` - Map of option values to display names
- `:operator` - Comparison operator (e.g., `:==`, `:=~`, `:<`)
- `:value` - Current filter value

- [Noora.HintText](Noora.HintText.md): Renders hint text with an icon, providing contextual information or validation messages with different variants (default, error, disabled).
- [Noora.Icon](Noora.Icon.md): Icons in use across the Noora design system.
- [Noora.Label](Noora.Label.md): Renders a label with an optional sublabel and a required indicator.
- [Noora.LineDivider](Noora.LineDivider.md): A component for rendering a line divider.
- [Noora.Modal](Noora.Modal.md): Renders a modal component with customizable headers, content, and footers, supporting various header types, sizes, and event handling.
- [Noora.PaginationGroup](Noora.PaginationGroup.md): Pagination group component for paginating with a defined set of pages. Do not use this component for cursor-based pagination.
- [Noora.Popover](Noora.Popover.md): Renders a popover component with a trigger and customizable content.
- [Noora.ProgressBar](Noora.ProgressBar.md): Progress bar component
- [Noora.Select](Noora.Select.md): A select dropdown component for choosing from a list of options.
- [Noora.ShortcutKey](Noora.ShortcutKey.md): Renders a keyboard shortcut key element with customizable size.
- [Noora.Sidebar](Noora.Sidebar.md): A flexible sidebar.
- [Noora.TabMenu](Noora.TabMenu.md): Tab menu components.
- [Noora.Table](Noora.Table.md): Noora's table component.
- [Noora.Tag](Noora.Tag.md): A tag component.
- [Noora.TextArea](Noora.TextArea.md): Renders textarea components with customizable labels, placeholders, character counting, and event handling.
- [Noora.TextDivider](Noora.TextDivider.md): A component for rendering a text divider.
- [Noora.TextInput](Noora.TextInput.md): Renders text input and digit input components with customizable types, labels, placeholders, prefixes, suffixes, and event handling.
- [Noora.Time](Noora.Time.md): A component to render a time.
- [Noora.Toggle](Noora.Toggle.md): A toggle switch input.
- [Noora.Tooltip](Noora.Tooltip.md): Renders a tooltip component with a trigger, customizable size, title, description, and optional icon.