Overview
ds-plan is a simple self-contained Web Component for showing a Soracom plan tag. The component will sanitize the plan text, and display the correctly formatted official plan name and color.
Options
Simply include the plan name inside the ds-plan element.
<ds-plan>[plan name]</ds-plan>
<ds-plan plan="[plan name]"></ds-plan>
Inline usage
The ds-plan component can be used inline within text, automatically matching the surrounding font size.
Sizing
Bundle
IMSI
Icons
Use icon to add an icon to the rendered plan tag. Use bundle-icon and imsi-icon to add icons to the bundle and IMSI labels.
Plan icon
Bundle icon
IMSI icon
Checkbox
Use type="checkbox" to render a checkbox input inside the plan tag, allowing users to select plans in a form.
Radio
Use type="radio" with a shared name attribute to create a radio group, allowing users to select a single plan.
Supported plans
| Plan key | Name | Color | Example |
|---|---|---|---|
plan01s | plan01s | | |
plan01sldv | plan01s-LDV | | |
pland | plan-D | | |
planddatasms | plan-D (Data/SMS) | | |
planddataonly | plan-D (Data-only) | | |
plandu | plan-DU | | |
plank | plan-K | | |
plank2 | plan-K2 | | |
plankm1 | plan-KM1 | | |
planarc01 | planArc01 | | |
planmc | plan-MC | | |
planmu | plan-MU | | |
plannt1 | planNT1 | | |
planp1 | planP1 | | |
planus | plan-US | | |
planusmax | plan-US-max | | |
planusna | plan-US-NA | | |
planfx1 | planFX1 | | |
planx1 | planX1 | | |
planx2 | planX2 | | |
planx3 | planX3 | | |
planx3eu | planX3-EU | | |
planxm1 | planXM1 | |
Attributes
| Attribute | Values | Default | Description |
|---|---|---|---|
plan |
Plan name string | — | Sets the plan name via attribute instead of inner text. Unknown keys render with the fallback color and normalized label. |
bundle |
Bundle label string | — | Displays a bundle label alongside the plan name. |
imsi |
15 digit IMSI string | — | Displays an IMSI label alongside the bundle label. |
icon |
Icon name | — | Adds an icon to the rendered plan tag as a --icon-* modifier. |
bundle-icon |
Icon name | — | Adds an icon to the bundle label as a --icon-* modifier. |
imsi-icon |
Icon name | — | Adds an icon to the IMSI label as a --icon-* modifier. |
size |
xsmall, small, medium, large |
— | Controls the size of the plan tag. |
type |
checkbox, radio |
— | Renders an input element inside the tag for use in forms. |
name |
Input name string | — | Sets the name attribute on the internal input. Use a shared name across radio-type plans to create a radio group. |
css |
global |
global |
Sets the CSS loading mode. Global CSS is the default and does not need to be specified. |
Manifest
The component manifest describes this component's API: its modifiers, structure, data attributes, CSS custom properties, accessibility notes, and example markup. It is consumed by tooling such as AI assistants and code generators.
Latest version: https://assets.soracom.io/sds/3.39.12/ds-plan/manifest.json?v=3.39.12
plans.json
Supported SORACOM plan keys, display names, background color classes, and text color classes.
Source: https://assets.soracom.io/sds/3.39.12/ds-plan/plans.json