Coral.AnchorButton

Coral.Calendar

Calendar depicts a navigable calendar that can show a selected date, and have the client select another date. Please note that for the `next` and `previous` month buttons to show properly, the embedding document is required to have set in its tag.

April 2025
Su Mo Tu We Th Fr Sa
30 31 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 1 2 3
4 5 6 7 8 9 10
Today, Friday, April 11, 2025

Coral.FileUpload

Coral.NumberInput

Coral.Search

Search is a touch friendly input control.

Coral.Textarea

Coral.Textfield

Coral.ActionBar

Coral.AnchorList

Coral.ButtonGroup

Coral.CharacterCount

0

Coral.Card

Image Girl's Eyes 3 4
Collection Asset Collection

Coral.Button

Coral.Alert

SuccessThis is an alert.

Coral.Icon

Coral.CycleButton

Card View List View Column View

Coral.Autocomplete

Coral.List

Community
What's new in CoralUI
CoralUI Status

Coral.Accordion

An accordion consists of multiple collapsibles. When one collapsible in the accordion is expanded, the others are collapsed.

Coral.Clock

Clock allows the user to choose a time using the 24h format.

:

Coral.Drawer

A drawer displays some content (hidden by default) that can be opened and closed with a sliding animation.

Coral.ColumnView

English Français Document

Coral.Multifield

Coral.Dialog

Coral.Masonry

Item 1 Item 2

Coral.ButtonList

Coral.Datepicker

The Datepicker component provides desktop and touch friendly for both date and time selection. The component leverages moment.js for parsing, manipulating, and formatting dates.

Coral.ColorInput

Coral.Checkbox

Coral.PanelStack

A Coral.PanelStack wraps content, keeping only the selected content in view. See the documentation for a working example.

Panel 1: This is the content of Panel 1. There are more coral-Panels defined in the PanelStack!

Coral.Progress

Coral.Popover

Coral.DragAction

 
You can drag me around

Coral.Radio

Coral.Overlay

A generic overlay component.

Coral.WizardView

A Coral.WizardView is used with a Coral.StepList and a Coral.PanelStack to create a 'wizard' UI pattern.

Step 1 Step 2 This is the content of the first step.

Coral.Select

Actions InfoCircle Check Add

Coral.Table

Activities Numbers Date
Alpha 23,857 January 28, 2012
Beta 20,398 December 1, 2011
Charlie 3,498 February 15, 2012
Delta 20,398 May 16, 2012

Coral.SelectList

Africa America Asia Europe Oceania

Coral.TabView

A Coral.TabView is used with a Coral.TabList and a Coral.PanelStack to create a 'tabs' UI pattern.

Tab 1 Tab 2 Tab1: Lorem ipsum dolor sit amet.

Coral.Tag

Tag

Coral.Slider

Coral.TabList

A Coral.TabList is used within a Coral.TabView to control a Coral.PanelStack which creates a typical 'Tabs' UI pattern.

Tab 1 Tab 2

Coral.TagList

Tag 1 Tag 2 Tag 3

Coral.QuickActions

Breakfast Lunch Dinner
Cereals Hot Dogs Baked Salmon
Toast Kebab Korean BBQ
Coffee Pasta Beef steak

Coral.StepList

Step 1 Step 2 Step 3

Coral.Switch

Coral.Tooltip

Hover Me

Coral.Wait