Skip to content
MENU

Soracom

Design System

Components

Universal component styling provides common presentation and functionality across all components and frameworks.

  • App

    A layout component for web apps

    Continue reading App
  • Autocomplete

    A container for an input and menu used as an autocomplete/type-ahead for the input.

    Continue reading Autocomplete
  • Breadcrumb

    Continue reading Breadcrumb
  • Buttons

    Continue reading Buttons
  • Card

    Continue reading Card
  • Checkbox

    Continue reading Checkbox
  • Cols

    A generic container for column layout

    Continue reading Cols
  • Copy

    Implementing a 'Copy code' element

    Continue reading Copy
  • Dark mode

    Continue reading Dark mode
  • Datatable

    Continue reading Datatable
  • Datetime Panel

    A combined datetime panel for selecting and filtering dates/times

    Continue reading Datetime Panel
  • Details

    Displays tabular label/value pairs of text content

    Continue reading Details
  • Dialog

    Continue reading Dialog
  • Disclosure

    Disclosure is for displaying an inline panel in which information is visible only when the component is toggled into an 'open' state.

    Continue reading Disclosure
  • Field

    A field is a generic container that contains a label, input and text.

    Continue reading Field
  • Form

    Continue reading Form
  • Group

    A visual container grouping a set of elements. Can be used with fieldset/legend.

    Continue reading Group
  • Header

    Continue reading Header
  • Icon

    Icon is for embedding an icon inside html content

    Continue reading Icon
  • Input

    Continue reading Input
  • Label

    Continue reading Label
  • Layout

    A generic container for layout.

    Continue reading Layout
  • Menu

    Menu displays a list of menu items

    Continue reading Menu
  • Menubutton

    Menubutton is for dynamically displaying navigation menus

    Continue reading Menubutton
  • Modal

    Continue reading Modal
  • Notice

    Notice is for displaying an inline panel with text and an optional icon.

    Continue reading Notice
  • Radio

    Continue reading Radio
  • Range

    Continue reading Range
  • Richtip

    Continue reading Richtip
  • Rows

    A generic container for row layout

    Continue reading Rows
  • Select

    Continue reading Select
  • Switch

    Continue reading Switch
  • Table

    Displays tabular label/value pairs of text content

    Continue reading Table
  • Tabs

    Displays a tab bar style list of menu items and contents

    Continue reading Tabs
  • Tag

    Continue reading Tag
  • Text

    Text is a general component for styling text content.

    Continue reading Text
  • Texttip

    Continue reading Texttip
  • Visual states

    Visual states are supported across a variety of components and provide a consistent way to indicate an elements status.

    Continue reading Visual states