# Flamingo Design System

> Flamingo is the Ataccama design system. It has React components, design tokens, patterns, and guidelines for Ataccama ONE products. Import components from `@ataccama/flamingo` and tokens from `@ataccama/flamingo-theme`.

The full content of all pages except the optional ones is in [llms-full.txt](https://flamingo.ataccama.com/llms-full.txt). Links that end in `.md` go to the markdown version of a page.

## Use design system

- [Contribution](https://flamingo.ataccama.com/use-design-system/contribution.md): Contributing to Flamingo is as easy as creating a new MR with your desired change or improvement.
- [Getting started](https://flamingo.ataccama.com/use-design-system/getting-started.md): You are here at the Flamingo design system website, so that's a good start!
- [Vision and principles](https://flamingo.ataccama.com/use-design-system/vision-and-principles.md): Our vision of Ataccama is a crafted product that guides our users and has their complete trust.
- [What is flamingo](https://flamingo.ataccama.com/use-design-system/what-is-flamingo.md): Flamingo is a design system that helps you create guiding, reliable, and crafted experiences for the users of Ataccama.
- [Why design system](https://flamingo.ataccama.com/use-design-system/why-design-system.md): Design systems are sets of guidelines, standards, components, and other reusable elements.

## Components

- [Accordion](https://flamingo.ataccama.com/component/accordion.md): An accordion is a collapsible container of content.
- [Action menu](https://flamingo.ataccama.com/component/action-menu.md): An action menu is a dropdown list of multiple context-specific actions.
- [Action panel](https://flamingo.ataccama.com/component/action-panel.md): An action panel displays available actions in a visually prominent bar at the bottom of the screen.
- [Alert](https://flamingo.ataccama.com/component/alert.md): The alert component highlights important information directly in the context of the related page.
- [App container](https://flamingo.ataccama.com/component/app-container.md): The app container component is a wrapper around all the content in a page.
- [Auto grid](https://flamingo.ataccama.com/component/auto-grid.md): An auto grid automatically arranges content in a grid according to available space.
- [Avatar](https://flamingo.ataccama.com/component/avatar.md): An avatar is a visual representation of a user, group or role.
- [Banner](https://flamingo.ataccama.com/component/banner.md): A banner displays a prominent message and typically suggests the next logical action.
- [Breadcrumbs](https://flamingo.ataccama.com/component/breadcrumbs.md): The breadcrumbs component is secondary navigation that helps users understand a structure.
- [Button](https://flamingo.ataccama.com/component/button.md): A button allows users to trigger actions. The label describes the action it performs. There are three variants: primary, secondary, and ghost.
- [Card accordion](https://flamingo.ataccama.com/component/card-accordion.md): A Card Accordion is a layout component that displays card content in expandable sections.
- [Card](https://flamingo.ataccama.com/component/card.md): A card is a layout component that displays content and actions on a given topic.
- [Checkbox](https://flamingo.ataccama.com/component/checkbox.md): Checkboxes allow users to select multiple options from a group.
- [Code block](https://flamingo.ataccama.com/component/code-block.md): The code block component displays preformatted, machine-generated text such as validation output, error logs, or query snippets.
- [Columns](https://flamingo.ataccama.com/component/columns.md): The columns component arranges content into adjustable columns.
- [Combobox](https://flamingo.ataccama.com/component/combobox.md): A combobox is an input field that enables users to select an option from a predefined list or enter a custom value.
- [Container query](https://flamingo.ataccama.com/component/container-query.md): This code-only component is a responsive wrapper around content.
- [Context menu](https://flamingo.ataccama.com/component/context-menu.md): A context menu provides users with a list of options directly in context.
- [Count badge](https://flamingo.ataccama.com/component/count-badge.md): A badge shows a total count of items.
- [Crash state](https://flamingo.ataccama.com/component/crash-state.md): A crash state is a responsive component gives users feedback about parts of the app that failed to load correctly.
- [Data type select](https://flamingo.ataccama.com/component/data-type-select.md)
- [Date picker](https://flamingo.ataccama.com/component/date-picker.md): A date picker allows users to set a date and time.
- [Div](https://flamingo.ataccama.com/component/div.md): A div is a code-only structural component.
- [Dynamic input](https://flamingo.ataccama.com/component/dynamic-input.md)
- [Ellipsis tooltip](https://flamingo.ataccama.com/component/ellipsis-tooltip.md): An ellipsis tooltip displays truncated content.
- [Empty state](https://flamingo.ataccama.com/component/empty-state.md): The empty state component communicates to users that there is no content to display in a given context.
- [Empty value](https://flamingo.ataccama.com/component/empty-value.md): The empty value component renders a locale-aware placeholder for missing or null values, such as a dash or em-dash.
- [File uploader](https://flamingo.ataccama.com/component/file-uploader.md): The file uploader allows the upload of one or multiple files by using the mouse and keyboard, or by dragging and dropping.
- [Flash message](https://flamingo.ataccama.com/component/flash-message.md): A flash message informs about status over other content.
- [Form field](https://flamingo.ataccama.com/component/form-field.md): This code-only component adds configurable properties to form components.
- [Form fields](https://flamingo.ataccama.com/component/form-fields.md): This code-only component is a wrapper around a set of form fields.
- [Header](https://flamingo.ataccama.com/component/header.md): A header is a composite component that displays other components and actions at the top of pages.
- [Icon button](https://flamingo.ataccama.com/component/icon-button.md): An icon button is a variant of an icon-only button for limited space.
- [Icon](https://flamingo.ataccama.com/component/icon.md): Icons are visual representations of specific elements.
- [Inline edit](https://flamingo.ataccama.com/component/inline-edit)
- [Inline](https://flamingo.ataccama.com/component/inline.md): Inline is a code-only structural component.
- [Interactive tag](https://flamingo.ataccama.com/component/interactive-tag.md): An interactive tag is a tag with states for working with assigned assets.
- [Labeling tag](https://flamingo.ataccama.com/component/labeling-tag.md): A labeling tag is a non-interactive tag that shows information about the state of an asset or process.
- [Link](https://flamingo.ataccama.com/component/link.md): A link component allows users to navigate to a different page.
- [Meter](https://flamingo.ataccama.com/component/meter.md): The meter component shows a gauge of a value or the progress of a task.
- [Modal](https://flamingo.ataccama.com/component/modal.md): A modal is a component that spans on top of the main active content, disables it, and requires users' attention, and usually an action to be performed.
- [Multi select](https://flamingo.ataccama.com/component/multi-select.md): A multi select allows users to pick one or more options from a list.
- [Navigation](https://flamingo.ataccama.com/component/navigation.md): The navigation component is the first level of main in-app navigation. This component allows users to be taken to relevant pages within the application.
- [Number input](https://flamingo.ataccama.com/component/number-input.md): The number input component allows users to easily input a single numerical value.
- [Page container](https://flamingo.ataccama.com/component/page-container.md): This code-only component is a wrapper for header and page components.
- [Page loader](https://flamingo.ataccama.com/component/page-loader.md): This code-only component is a full-screen spinner component.
- [Page](https://flamingo.ataccama.com/component/page.md): This code-only component is a wrapper around main content.
- [Paginator](https://flamingo.ataccama.com/component/paginator.md): The paginator displays information about paginated content and allows users to navigate.
- [Popover](https://flamingo.ataccama.com/component/popover.md): A popover displays an overlay with additional content in the current context.
- [Property listing](https://flamingo.ataccama.com/component/property-listing.md): A property listing displays properties and values of assets.
- [Radio](https://flamingo.ataccama.com/component/radio.md): Radios allow users to select an option from a list.
- [Rule tag](https://flamingo.ataccama.com/component/rule-tag.md): Use a Rule tag to display suggested and applied Rules.
- [Scrollable](https://flamingo.ataccama.com/component/scrollable.md): The scrollable component allows users to scroll through content.
- [Search input](https://flamingo.ataccama.com/component/search-input.md): Use a search input to allow users to find the piece of content they are looking for.
- [Segmented control](https://flamingo.ataccama.com/component/segmented-control.md): Segmented control allows users to select a single option with immediate effect.
- [Sidebar](https://flamingo.ataccama.com/component/sidebar.md): A sidebar is a collapsible layout component for content.
- [Simple listing item](https://flamingo.ataccama.com/component/simple-listing-item)
- [Single select](https://flamingo.ataccama.com/component/single-select.md): A single select allows users to pick one single option from a list.
- [Spinner](https://flamingo.ataccama.com/component/spinner.md): The spinner component indicates loading content.
- [Split button](https://flamingo.ataccama.com/component/split-button.md): A split button is a multi-function button that allows users to select from several variants of an action. The label describes the most logical variant of the action it performs. Other variants are displayed when the arrow icon is clicked.
- [Split view](https://flamingo.ataccama.com/component/split-view)
- [Stack](https://flamingo.ataccama.com/component/stack.md): This code-only component arranges objects based on the spacing guidelines in the Flamingo tokens.
- [Stepper](https://flamingo.ataccama.com/component/stepper.md): A stepper shows the current location in a multi-step flow, along with the number of steps.
- [Sub navigation](https://flamingo.ataccama.com/component/sub-navigation.md): Sub-navigation is the second level of the main in-app navigation. This component allows users to be taken to relevant pages within the application.
- [Switch](https://flamingo.ataccama.com/component/switch.md): A switch allows users to quickly toggle between two possible states. In most cases, users will enable or disable a feature via switch.
- [Table](https://flamingo.ataccama.com/component/table.md): Displays and arranges data in a table.
- [Tabs](https://flamingo.ataccama.com/component/tabs.md): A tab is a visual element that allows hiding and navigating related content in one context.
- [Tag group](https://flamingo.ataccama.com/component/tag-group.md)
- [Term tag](https://flamingo.ataccama.com/component/term-tag.md): Use a Term tag to display accepted, suggested, and removed Terms.
- [Text area](https://flamingo.ataccama.com/component/text-area.md): A text area allows users to enter and edit a long value. Values comprise text and numbers, and are plain-formatted.
- [Text input](https://flamingo.ataccama.com/component/text-input.md): A text input allows users to enter and edit a one-line value. Values comprise text and numbers and are plain-formatted.
- [Text truncate](https://flamingo.ataccama.com/component/text-truncate.md): This code-only component is a responsive container of text.
- [Text](https://flamingo.ataccama.com/component/text.md): The text component displays formatted text.
- [Toolbar](https://flamingo.ataccama.com/component/toolbar.md): A toolbar is a layout component that groups related actions together.
- [Tooltip](https://flamingo.ataccama.com/component/tooltip.md): A tooltip shows brief additional information in a plain-text format.

## Patterns

- [Adding items](https://flamingo.ataccama.com/patterns/adding-items.md): This guide helps you determine which component to use to allow users to select an item or multiple items from a list of possible existing items.
- [Creating items](https://flamingo.ataccama.com/patterns/creating-items.md): This guide helps you determine which component to use to allow users to create an item that hadn’t existed before.
- [Disabling actions](https://flamingo.ataccama.com/patterns/disabling-actions.md): Use this flowchart to help you decide whether a component should be hidden, disabled or enabled.
- [Error states](https://flamingo.ataccama.com/patterns/error-states.md): This page provides guidance on how to design error states within our product.
- [Forms buttons](https://flamingo.ataccama.com/patterns/forms-buttons.md): Users can add or remove item from a certain context using buttons.
- [Forms grouping](https://flamingo.ataccama.com/patterns/forms-grouping.md): Highlight different levels of content by using predefined background and border settings.
- [Forms placing inputs](https://flamingo.ataccama.com/patterns/forms-placing-inputs.md): Add labels above the respective input fields by default.
- [Icon making guide](https://flamingo.ataccama.com/patterns/icon-making-guide.md): This guide is a selection of rules and tips on making a new icon for the Flamingo design system.
- [Input components](https://flamingo.ataccama.com/patterns/input-components.md): Selecting the right component is key to a smooth user experience.
- [Sizing](https://flamingo.ataccama.com/patterns/sizing.md): Content is composed of components that can be contained in a layout component.
- [Spacing](https://flamingo.ataccama.com/patterns/spacing.md): This guide describes some basic rules for spacing between components.
- [Status indication](https://flamingo.ataccama.com/patterns/status-indication.md): Status indications help users quickly recognize and respond to different system states by combining visual cues (icons, colors) with clear, actionable messages, helping people understand what's happening and what they need to do next.
- [Using icons](https://flamingo.ataccama.com/patterns/using-icons.md): Icons are visual representations of specific elements.
- [Using tables](https://flamingo.ataccama.com/patterns/using-tables.md): This article provides a how to guide to using tables.
- [Writing guides](https://flamingo.ataccama.com/patterns/writing-guides.md): There is a certain level of creative freedom when writing any form of a guide for the Flamingo design system.

## Tokens

- [Borders](https://flamingo.ataccama.com/tokens/borders)
- [Radii](https://flamingo.ataccama.com/tokens/radii)
- [Shadows](https://flamingo.ataccama.com/tokens/shadows)
- [Spacings](https://flamingo.ataccama.com/tokens/spacings)
- [Typography](https://flamingo.ataccama.com/tokens/typography.md): We use Ataccama Sans and Ataccama Mono—custom configurations of the high-quality and widely trusted open-source typefaces Inter and JetBrains Mono—for all in-product text.
- [Using tokens](https://flamingo.ataccama.com/tokens/using-tokens.md): Design tokens help achieve a consistent visual style of products.
- [Z indices](https://flamingo.ataccama.com/tokens/z-indices)

## Guidelines

- [Accessibility](https://flamingo.ataccama.com/accessibility.md): At Ataccama, we are committed to building inclusive digital experiences.
- [Content design style guide](https://flamingo.ataccama.com/content-design-style-guide.md): UI copy is how Ataccama speaks to our users.
- [Responsive design](https://flamingo.ataccama.com/responsive-design.md): Instead of solving responsivity based on browser window size, we design our components that works great in any context.

## Optional

- [Beyond a UI library: Fostering the culture of collaboration using a design system](https://flamingo.ataccama.com/blog/beyond-ui-library.md): Collaboration between design system designers and product designers is crucial for the successful and efficient development of a design system.
- [Documenting the Flamingo design system using a custom website](https://flamingo.ataccama.com/blog/documenting-flamingo.md): We draw, code and write our own design system website. Read about the reasons why we do it this way and how it works.
- [A guide on using Figma for product management and frontend development](https://flamingo.ataccama.com/blog/how-to-use-figma.md): Read on how we work with Figma and better understand how Ataccama designers prepare their files for collaboration and hand-offs.
- [Screenshot testing of design system React components](https://flamingo.ataccama.com/blog/screenshot-testing.md): In this blog post, we will explore the benefits of using Playwright for screenshot testing in React components within a design system, and how it solves common testing issues.
- [Why does Ataccama have a design system?](https://flamingo.ataccama.com/blog/why-design-system.md): This post is the first in our new blog. Doesn’t it make sense to explain here why a B2B company like Ataccama has its own design system made from scratch?