Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About
Components
  • Overview
  • Alert
  • App layout
  • Attribute editor
  • Autosuggest
  • Badge
  • Board components
    • Board
    • Board item
    • Items palette
  • Box
  • Breadcrumb group
  • Button
  • Button dropdown
  • Calendar
  • Cards
  • Charts
    • Bar chart
    • Line chart
    • Area chart
    • Mixed line and bar chart
    • Pie and donut charts
  • Checkbox
  • Code editor
  • Collection preferences
  • Collection select filter
  • Column layout
  • Container
  • Content layout
  • Copy to clipboard
  • Date input
  • Date picker
  • Date range picker
  • Expandable section
  • File upload
  • Flashbar
  • Form
  • Form field
  • Grid
  • Header
  • Help panel
  • Icon
  • Input
  • Key-value pairs
  • Link
  • Modal
  • Multiselect
  • Pagination
  • Popover
  • Progress bar
  • Property filter
  • Radio group
  • S3 resource selector
  • Segmented control
  • Select
  • Side navigation
  • Space between
  • Spinner
  • Split panel
  • Status indicator
  • Table
  • Tabs
  • Tag editor
  • Text content
  • Text filter
  • Text area
  • Tiles
  • Time input
  • Toggle
  • Token group
  • Top navigation
  • Tutorial components
    • Annotation context
    • Hotspot
    • Tutorial panel
  • Wizard
  1. Cloudscape Design System
    • Components
    • Overview

    Components overview

    Components are built with React and implement the design patterns and guidelines of Cloudscape. All components are tested, responsive, and accessible.

    Components (72)

      Alert

      A brief message that provides information or instructs users to take a specific action.

      Annotation context

      The annotation context is an invisible layer on top of the interface. It tracks the progress of a launched tutorial and feeds dynamic content to the Tutorial panel in Hands-on tutorials. It also renders annotation popovers and hotspot icons.

      App layout

      Provides the basic layout for all types of pages, including collapsible side navigation, tools panel, and split panel.

      Area chart

      The area chart visualizes two or more series of data. Through stacked data series, it emphasizes the part-to-whole relationship of data over a period of time.

      Attribute editor

      With the attribute editor, users can create, edit, and delete resource attributes.

      Autosuggest

      An input that provides a list of suggestions that the user can choose from.

      Badge

      A small, color-coded visual element that contains letters or numbers, that you can use to label, categorize, or organize items.

      Bar chart

      Visualizes one or many series of data, with an emphasis on the total amount of each data point.

      Board components

      Provides the base for a configurable layout, including drag and drop, responsiveness and grid.

      Board item

      A board item is a self-contained user interface (UI) element living within a board.

      Box

      With the box component, you can display and style basic elements and containers in compliance with Cloudscape's typography and spacing strategy.

      Breadcrumb group

      Displays a series of navigational links in a hierarchical list.

      Button

      Allows users to initiate actions in the user interface.

      Button dropdown

      With a button dropdown, you can group a set of actions under one button.

      Calendar

      With the calendar component, users can select dates.

      Cards

      Represents a collection of resources.

      Checkbox

      A checkbox is a form element where users can make a binary choice.

      Code editor

      With the code editor, users can write and edit code.

      Collection preferences

      With collection preferences, users can manage their display preferences within a collection.

      Collection select filter

      A select filter helps users find specific items in a collection of resources by choosing one or two properties.

      Column layout

      Column layout helps you position content in columns.

      Container

      With the container, you can present a group of pieces of content, indicating that the items are related. For example, a table is a type of container.

      Content layout

      Provides the basic layout for the header and content of a page.

      Copy to clipboard

      With copy to clipboard, users can copy content to their clipboard.

      Date input

      A form element in which a user can enter a date value.

      Date picker

      With the date picker, users can enter or choose a date value.

      Date range picker

      With the date range picker, users can specify a date and time range. 

      Expandable section

      With expandable selection, users can expand or collapse a section. Use expandable
      sections when you have multiple sections on a page, and you want to allow users to see one or more sections at a time. Expandable sections are collapsed by default.

      File upload

      File upload is a form element. Users can use it to select one or multiple local files to upload. The file(s) can then be uploaded upon form submission or processed further in the browser.

      Flashbar

      Displays one or more page-level flash notifications to communicate the status of a user’s action, such as success, failed, and so on.

      Form

      A section of a page that has interactive controls with which a user can submit information to a web server.

      Form field

      With the form field, users can create properly-styled controls in a form.

      Grid

      The grid component distributes content on a page. It helps build consistent, balanced, and responsive layouts across an application.

      Header

      Summarizes the content that's displayed under it and provides a space for optional action buttons.

      Help panel

      The panel displays help content that relates to a concept, term, setting, option, or task within the main page content.

      Hotspot

      In hands-on tutorials, hotspots are invisible containers that mark the spots where hotspot icons should be placed. Hotspot icons are rendered by the annotation context and are used to open and close annotation popovers.

      Icon

      With an icon, you can display basic icons that match Cloudscape sizes, colors, and typography.

      Input

      With the input control, users can input a single line of text.

      Items palette

      Provides the ability to add board items to a board when combined with discrete split panel.

      Key-value pairs

      Key-value pairs are lists of properties (keys) followed by the corresponding value.

      Line chart

      Visualizes one or many series of data, with an emphasis on how the data changes over time.

      Link

      A link component is an anchor tag that defines a hyperlink, which a user can interact with to find out more information about a concept, task, or field.