Components (67)

    AlertAlert
    A brief message that provides information or instructs users to take a specific action.
    Annotation contextAnnotation 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 layoutApp layout
    Provides the basic layout for all types of pages, including collapsible side navigation, tools panel, and split panel.
    Area chart imageArea chart image
    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 editorAttribute editor
    With the attribute editor, users can create, edit, and delete resource attributes.
    AutosuggestAutosuggest
    An input that provides a list of suggestions that the user can choose from.
    BadgeBadge
    A small, color-coded visual element that contains letters or numbers, that you can use to label, categorize, or organize items.
    Bar chartBar chart
    Visualizes one or many series of data, with an emphasis on the total amount of each data point.
    BoxBox
    With the box component, you can display and style basic elements and containers in compliance with Cloudscape's typography and spacing strategy.
    Breadcrumb groupBreadcrumb group
    Displays a series of navigational links in a hierarchical list.
    ButtonButton
    Allows users to initiate actions in the user interface.
    Button dropdownButton dropdown
    With a button dropdown, you can group a set of actions under one button.
    CardsCards
    Represents a collection of resources.
    CheckboxCheckbox
    A checkbox is a form element where users can make a binary choice.
    Code editorCode editor
    With the code editor, users can write and edit code.
    Collection preferencesCollection preferences
    With collection preferences, users can manage their display preferences within a collection.
    Collection select filterCollection select filter
    A select filter helps users find specific items in a collection of resources by choosing one or two properties.
    Column layoutColumn layout
    Column layout helps you position content in columns.
    ContainerContainer
    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 layoutContent layout
    Provides the basic layout for the header and content of a page.
    Copy to clipboardCopy to clipboard
    With copy to clipboard, users can copy content to their clipboard.
    Date PickerDate Picker
    With the date picker, users can enter or choose a date value.
    Date range pickerDate range picker
    With the date range picker, users can specify a date and time range. 
    Expandable sectionExpandable 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 uploadFile 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.
    FlashbarFlashbar
    Displays one or more page-level flash notifications to communicate the status of a user’s action, such as success, failed, and so on.
    FormForm
    A section of a page that has interactive controls with which a user can submit information to a web server.
    Form fieldForm field
    With the form field, users can create properly-styled controls in a form.
    GridGrid
    The grid component distributes content on a page. It helps build consistent, balanced, and responsive layouts across an application.
    HeaderHeader
    Summarizes the content that's displayed under it and provides a space for optional action buttons.
    Help panelHelp panel

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

    HotspotHotspot
    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.
    IconIcon
    With an icon, you can display basic icons that match Cloudscape sizes, colors, and typography.
    InputInput
    With the input control, users can input a single line of text.
    Key-value pairKey-value pair
    Key-value pairs are lists of properties (keys) followed by the corresponding value.
    Line chartLine chart
    Visualizes one or many series of data, with an emphasis on how the data changes over time.
    LinkLink
    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.
    Mixed line and bar chartMixed line and bar chart
    Visualizes different, but related, series of data on a single chart.
    ModalModal
    A user interface element subordinate to an application's main window. It prevents interaction with the main page content, but keeps it visible with the modal as a child window in front of it.
    MultiselectMultiselect
    With a form element, users can choose multiple items from a list of options.
    PaginationPagination
    Provides horizontal navigation between pages of a collection.
    Pie and donut chartPie and donut chart
    Pie and donut charts visualize the relationship or correlation between data metrics in a dataset.
    PopoverPopover
    Provides on-demand contextual information about elements or events.
    Progress barProgress bar
    Informs the user about the progress of an operation with a known duration.
    Property filterProperty filter
    A property filter lets users find specific items in a collection of resources by using properties, property values, typing free text, and combining these with operators.
    Radio groupRadio group
    With this form element, users can choose one of a predefined set of options.
    S3 Resource selectorS3 Resource selector
    S3 resource selector is a component that provides the ability to read objects from an S3 bucket, or write objects to an S3 bucket with a prefix.
    Segmented controlSegmented control
    With a segmented control, users can toggle between different ways of formatting a piece of content or data.
    SelectSelect
    A form element that lets users choose a single item from a list of items.
    Side navigationSide navigation
    A list of navigational links that point to the pages within an application.
    Space betweenSpace between
    A helper component that helps you add consistent spacing between elements on your page.
    SpinnerSpinner
    A compact, looped animation giving the user feedback that a process is currently running.
    Split panelSplit panel
    A collapsible panel that provides access to secondary information or controls. It is the primary component to implement split view, a pattern to display resource collection with contextual resource details.
    Status indicatorStatus indicator
    A status indicator communicates the state of a resource—either in its entirety or a particular facet of a resource—in a compact form that is easily embedded in a card, table, list, or header view.
    TableTable
    Presents data in a two-dimensional table format, arranged in columns and rows in a rectangular form.
    TabsTabs
    With tabs, users can switch between different categories of information in the same view.
    Tag editorTag editor
    An extension of the attribute editor built with integrated logic. With the tag editor, users can create, edit, or delete resource tags.
    TextareaTextarea
    A form element that provides a multi-line, plain-text input control.
    Text contentText content
    Use to style chunks of HTML by applying default typographical styles to the content.
    Text filterText filter
    With a text filter, users can enter text that’s used to match specific items in a collection.
    TilesTiles
    A form element that's an extension of a radio group with additional metadata to facilitate comparisons or progressive disclosure. As with a radio group, tiles allow the user to choose one of a predefined set of options.
    time Inputtime Input
    A form element in which a user can enter an absolute time value.
    ToggleToggle
    A switch that turns an option on or off.
    Token groupToken group
    A set of compact representations of an individual item selected from a list.
    Top navigationTop navigation

    A global navigation element for services that is consistent and persisted across all service pages.

    Tutorial panelTutorial panel
    The tutorial panel houses contextual Hands-on tutorials that help users learn how to use a service.
    WizardWizard
    A multi-page form that guides a user through a complex flow or a series of interrelated tasks. A wizard consists of a navigation pane, header, main content area, and action buttons.