Components

View on GitHub

Components are the main building blocks of Sky UI. They can be used on their own or within patterns. Only tested components that have been proven to be functional and accessible are part of the Design System.

Actions

Help users complete an aim.

Button

Buttons (also called CTAs – Call To Action) help users initiate actions.

Icon Button

The Icon Button provides a clickable container for a Skycon.

Text Link

The Text Link makes text actionable.

Communication

Provide additional information or feedback.

Highlight

Highlight is a callout used to draw attention to a particular detail.

Loading Spinner

The loading spinner uses animation to show that an activity is in progress.

Notification

Notification is a component primarily used for system notifications.

Popover

The Popover displays supplementary content on top of another.

Toast

Toast provides brief feedback about an operation through a message at the bottom of the screen.

Containment

Hold different forms of content.

Accordion

Accordions allow users to expand and collapse pieces of content.

Card

A Card is a flexible-sized container.

Carousel

An infinite scrolling carousel showcasing visual content.

Comparison Table

To compare options like product offers, features or price plans.

Modal

The Modal is a component that appears on top of the main content.

Product Card

Product Card is used to display product information and present potential product-based actions.

Rail

Shows a vast variety of visual content that is connected by a common theme

Content

Different ways to present images, videos and text.

Blockquote

Quotation offset from body text.

Feature List

List multiple key points to help unpack a proposition.

Feature

Feature is a pattern, used to introduce a product or proposition.

Headline Price

Shows key pricing information in a headline format.

Icon List

Icon lists are used as an alternative to bullet or numbered lists.

Icon

Component to support the use of SVG icons (including Skycons).This is only available for consumption within our development packages

Image

Image component used for displaying and setting properties to images.This is only available for consumption within our development packages

Price

Shows key pricing information in an inline format.

Text

Allows for the ability to write content.This is only available for consumption within our development packages

Video

Video component used for displaying and setting properties to videos.This is only available for consumption within our development packages

VisuallyHiddenText

Visually hidden element providing text for assistive technologies.

Input & Selection

Choose or enter information using elements like checkboxes, text fields, and more.

Checkbox

Checkboxes offers options for users to select.

Control Field

Control fields are used with checkbox and radio components.

Field

The Field component is used to decorate TextInput and Select components with a label, message and validation.This is only available for consumption within our development packages

Forms

An overview of all the available form components within Sky UI.This is only available for consumption on Figma

Radio Card

Radio Card offers mutually exclusive options, providing more content than the Radio component

Radio

Radios offer mutually exclusive options for users to select.

Select

Select components provide different options for users to choose from.

Swatch

Swatch components are used to showcase available colour options.

Switch

Switch toggles the state of an item on or off.

Text Input

Text inputs are fields that users can type free text into.

Textarea

Layout

Box

Box is the lowest-level component that could receive most of the system props such as border, colour, padding etc.This is only available for consumption within our development packages

Container

The Container component can constrain the size of the content based on the Sky grid system.This is only available for consumption within our development packages

Flex

Flex is a utility component that surfaces Flexbox properties.This is only available for consumption within our development packages

Grid

Grid is a utility component that surfaces Grid properties.This is only available for consumption within our development packages

Position

The Position component allows elements to be rapidly positioned without needing to use bespoke components.This is only available for consumption within our development packages