Badge

Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.

{
  "slug": "badge",
  "$schema": "https://opensource.adobe.com/spectrum-design-data/schemas/component.json",
  "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/components/badge.json",
  "title": "Badge",
  "description": "Similar to status lights, badges are for showing a small amount of color-categorized metadata. They're ideal for getting a user''s attention.",
  "meta": {
    "category": "status",
    "documentationUrl": "https://spectrum.adobe.com/page/badge/"
  },
  "type": "object",
  "properties": {
    "label": {
      "type": "string",
      "description": "When the label is not defined, the badge appears as icon-only."
    },
    "icon": {
      "$id": "https://opensource.adobe.com/spectrum-design-data/schemas/types/workflow-icon.json",
      "type": "string",
      "title": "workflow-icon",
      "enum": [
        "123",
        "3DMaterials",
        "ABC",
        "AEMScreens",
        "Actions",
        "AdDisplay",
        "AdPrint",
        "Add",
        "AddCircle",
        "AddTo",
        "AddToSelection",
        "Airplane",
        "Alert",
        "AlertAdd",
        "AlertCheck",
        "AlertCircle",
        "AlertCircleFilled",
        "Algorithm",
        "Alias",
        "AlignBottom",
        "AlignCenter",
        "AlignLeft",
        "AlignMiddle",
        "AlignRight",
        "AlignTop",
        "Amusementpark",
        "Anchor",
        "AnchorSelect",
        "Annotate",
        "AnnotatePen",
        "Answer",
        "AnswerFavorite",
        "App",
        "AppRefresh",
        "AppleFiles",
        "ApplicationDelivery",
        "ApproveReject",
        "Apps",
        "Archive",
        "ArchiveRemove",
        "ArrowDown",
        "ArrowLeft",
        "ArrowRight",
        "ArrowUp",
        "ArrowUpRight",
        "Artboard",
        "Article",
        "Asset",
        "AssetCheck",
        "AssetsAdded",
        "AssetsDownloaded",
        "AssetsExpired",
        "AssetsLinkedPublished",
        "AssetsModified",
        "AssetsPublished",
        "Asterisk",
        "At",
        "Attach",
        "AttachmentExclude",
        "Attributes",
        "Audio",
        "AutomatedSegment",
        "Back",
        "Back30Seconds",
        "BackAndroid",
        "Beaker",
        "BeakerCheck",
        "BeakerShare",
        "Bell",
        "BidRule",
        "BidRuleAdd",
        "Blower",
        "Blur",
        "Book",
        "Bookmark",
        "BookmarkSingle",
        "BookmarkSingleOutline",
        "BookmarkSmall",
        "BookmarkSmallOutline",
        "Boolean",
        "Border",
        "Box",
        "BoxAdd",
        "BoxExport",
        "BoxImport",
        "Brackets",
        "BracketsSquare",
        "Branch1",
        "Branch2",
        "Branch3",
        "BranchCircle",
        "BreadcrumbNavigation",
        "Breakdown",
        "BreakdownAdd",
        "Briefcase",
        "Browse",
        "Brush",
        "Bug",
        "Building",
        "BulkEditUsers",
        "Button",
        "CCLibrary",
        "Calculator",
        "Calendar",
        "CalendarAdd",
        "CalendarLocked",
        "CalendarUnlocked",
        "CallCenter",
        "Camera",
        "CameraFlip",
        "CameraRefresh",
        "Campaign",
        "CampaignAdd",
        "CampaignClose",
        "CampaignDelete",
        "CampaignEdit",
        "Cancel",
        "Capitals",
        "Captcha",
        "Car",
        "Card",
        "Channel",
        "Chat",
        "ChatAdd",
        "CheckPause",
        "Checkmark",
        "CheckmarkCircle",
        "CheckmarkCircleOutline",
        "ChevronDoubleLeft",
        "ChevronDoubleRight",
        "ChevronDown",
        "ChevronLeft",
        "ChevronRight",
        "ChevronUp",
        "ChevronUpDown",
        "Circle",
        "CircleFilled",
        "ClassicGridView",
        "Clock",
        "ClockCheck",
        "CloneStamp",
        "Close",
        "CloseCaptions",
        "CloseCircle",
        "Cloud",
        "CloudDisconnected",
        "CloudError",
        "CloudOutline",
        "Code",
        "Collection",
        "CollectionAdd",
        "CollectionAddTo",
        "CollectionCheck",
        "CollectionEdit",
        "CollectionExclude",
        "CollectionLink",
        "ColorFill",
        "ColorPalette",
        "ColorWheel",
        "ColumnSettings",
        "ColumnTwoA",
        "ColumnTwoB",
        "ColumnTwoC",
        "Comment",
        "Compare",
        "Compass",
        "Condition",
        "ConfidenceFour",
        "ConfidenceOne",
        "ConfidenceThree",
        "ConfidenceTwo",
        "Contrast",
        "ConversionFunnel",
        "Copy",
        "CoverImage",
        "CreditCard",
        "Crop",
        "CropLightning",
        "CropRotate",
        "Crosshairs",
        "Curate",
        "Cut",
        "Dashboard",
        "Data",
        "DataAdd",
        "DataBook",
        "DataCheck",
        "DataCorrelated",
        "DataDownload",
        "DataEdit",
        "DataMapping",
        "DataRefresh",
        "DataRemove",
        "DataSettings",
        "DataUnavailable",
        "DataUpload",
        "DataUser",
        "Date",
        "DateInput",
        "Deduplication",
        "Delegate",
        "Delete",
        "DeleteOutline",
        "Demographic",
        "Deselect",
        "DeselectCircular",
        "DesktopAndMobile",
        "DeviceDesktop",
        "DeviceLaptop",
        "DevicePhone",
        "DevicePhoneRefresh",
        "DevicePreview",
        "DeviceRotateLandscape",
        "DeviceRotatePortrait",
        "DeviceTV",
        "DeviceTablet",
        "Devices",
        "DistributeBottomEdge",
        "DistributeHorizontalCenter",
        "DistributeHorizontally",
        "DistributeLeftEdge",
        "DistributeRightEdge",
        "DistributeSpaceHoriz",
        "DistributeSpaceVert",
        "DistributeTopEdge",
        "DistributeVerticalCenter",
        "DistributeVertically",
        "Divide",
        "DividePath",
        "Document",
        "DocumentFragment",
        "DocumentFragmentGroup",
        "DocumentOutline",
        "DocumentRefresh",
        "Dolly",
        "Download",
        "DownloadFromCloud",
        "DownloadFromCloudOutline",
        "Draft",
        "DragHandle",
        "Draw",
        "Dropdown",
        "Duplicate",
        "Edit",
        "EditCircle",
        "EditExclude",
        "EditIn",
        "EditInLight",
        "Education",
        "Effects",
        "Efficient",
        "Ellipse",
        "Email",
        "EmailCancel",
        "EmailCheck",
        "EmailExclude",
        "EmailExcludeOutline",
        "EmailGear",
        "EmailGearOutline",
        "EmailKey",
        "EmailKeyOutline",
        "EmailLightning",
        "EmailNotification",
        "EmailOutline",
        "EmailRefresh",
        "EmailSchedule",
        "Engagement",
        "Erase",
        "Event",
        "EventExclude",
        "EventShare",
        "Events",
        "ExcludeOverlap",
        "Experience",
        "ExperienceAdd",
        "ExperienceAddTo",
        "ExperienceExport",
        "ExperienceImport",
        "Export",
        "ExportOriginal",
        "Exposure",
        "Extension",
        "FacebookCoverImage",
        "Fast",
        "FastForward",
        "FastForwardCircle",
        "Feature",
        "Feed",
        "FeedAdd",
        "FeedManagement",
        "Feedback",
        "FileAdd",
        "FileCSV",
        "FileCampaign",
        "FileChart",
        "FileCheckedOut",
        "FileCode",
        "FileData",
        "FileEmail",
        "FileExcel",
        "FileFolder",
        "FileGear",
        "FileGlobe",
        "FileHTML",
        "FileImportant",
        "FileJson",
        "FileKey",
        "FileMobile",
        "FilePDF",
        "FileShare",
        "FileSingleWebPage",
        "FileSpace",
        "FileTemplate",
        "FileTxt",
        "FileUser",
        "FileWord",
        "FileWorkflow",
        "FileXML",
        "FileZip",
        "FilingCabinet",
        "Filmroll",
        "FilmrollAutoAdd",
        "Filter",
        "FilterAdd",
        "FilterCheck",
        "FilterDelete",
        "FilterEdit",
        "FilterHeart",
        "FilterRemove",
        "FilterStar",
        "FindAndReplace",
        "Flag",
        "FlagExclude",
        "FlashAuto",
        "FlashOff",
        "FlashOn",
        "Flashlight",
        "FlashlightOff",
        "FlashlightOn",
        "FlipHorizontal",
        "FlipVertical",
        "Folder",
        "Folder2Color",
        "FolderAdd",
        "FolderAddTo",
        "FolderArchive",
        "FolderDelete",
        "FolderGear",
        "FolderLocked",
        "FolderOpen",
        "FolderOpenOutline",
        "FolderOutline",
        "FolderRemove",
        "FolderSearch",
        "FolderUser",
        "Follow",
        "FollowOff",
        "ForPlacementOnly",
        "Forecast",
        "Form",
        "Forward",
        "FullScreen",
        "FullScreenExit",
        "Function",
        "Game",
        "Gauge1",
        "Gauge2",
        "Gauge3",
        "Gauge4",
        "Gauge5",
        "Gears",
        "GearsAdd",
        "GearsDelete",
        "GearsEdit",
        "GenderFemale",
        "GenderMale",
        "Gift",
        "Globe",
        "GlobeCheck",
        "GlobeClock",
        "GlobeEnter",
        "GlobeExit",
        "GlobeGrid",
        "GlobeOutline",
        "GlobeRemove",
        "GlobeSearch",
        "GlobeStrike",
        "GlobeStrikeClock",
        "Gradient",
        "GraphArea",
        "GraphAreaStacked",
        "GraphBarHorizontal",
        "GraphBarHorizontalAdd",
        "GraphBarHorizontalStacked",
        "GraphBarVertical",
        "GraphBarVerticalAdd",
        "GraphBarVerticalStacked",
        "GraphBubble",
        "GraphBullet",
        "GraphConfidenceBands",
        "GraphDonut",
        "GraphDonutAdd",
        "GraphGantt",
        "GraphHistogram",
        "GraphPathing",
        "GraphPie",
        "GraphProfitCurve",
        "GraphScatter",
        "GraphStream",
        "GraphStreamRanked",
        "GraphStreamRankedAdd",
        "GraphSunburst",
        "GraphTree",
        "GraphTrend",
        "GraphTrendAdd",
        "GraphTrendAlert",
        "Graphic",
        "Group",
        "Hammer",
        "Hand",
        "Hand0",
        "Hand1",
        "Hand2",
        "Hand3",
        "Hand4",
        "Heal",
        "Heart",
        "Help",
        "HelpOutline",
        "Histogram",
        "History",
        "Home",
        "Homepage",
        "HotFixes",
        "HotelBed",
        "IdentityService",
        "Image",
        "ImageAdd",
        "ImageAlbum",
        "ImageAutoMode",
        "ImageCarousel",
        "ImageCheck",
        "ImageCheckedOut",
        "ImageMapCircle",
        "ImageMapPolygon",
        "ImageMapRectangle",
        "ImageNext",
        "ImageProfile",
        "ImageSearch",
        "ImageText",
        "Images",
        "Import",
        "Inbox",
        "Individual",
        "Info",
        "InfoOutline",
        "IntersectOverlap",
        "InvertAdj",
        "Invite",
        "Journey",
        "JourneyAction",
        "JourneyData",
        "JourneyEvent",
        "JourneyEvent2",
        "JourneyReports",
        "JourneyVoyager",
        "JumpToTop",
        "Key",
        "KeyClock",
        "KeyExclude",
        "Keyboard",
        "Label",
        "LabelExclude",
        "Labels",
        "Landscape",
        "Launch",
        "Layers",
        "LayersBackward",
        "LayersBringToFront",
        "LayersForward",
        "LayersSendToBack",
        "Light",
        "Line",
        "LineHeight",
        "LinearGradient",
        "Link",
        "LinkCheck",
        "LinkGlobe",
        "LinkNav",
        "LinkOff",
        "LinkOut",
        "LinkOutLight",
        "LinkPage",
        "LinkUser",
        "Location",
        "LocationBasedDate",
        "LocationBasedEvent",
        "LocationContribution",
        "LockClosed",
        "LockOpen",
        "LogOut",
        "Login",
        "Looks",
        "LoupeView",
        "MBox",
        "MagicWand",
        "Magnify",
        "Mailbox",
        "MapView",
        "MarginBottom",
        "MarginLeft",
        "MarginRight",
        "MarginTop",
        "MarketingActivities",
        "Maximize",
        "Measure",
        "Menu",
        "Merge",
        "MergeLayers",
        "Messenger",
        "Minimize",
        "MobileServices",
        "ModernGridView",
        "Money",
        "Monitoring",
        "Moon",
        "More",
        "MoreCircle",
        "MoreSmall",
        "MoreSmallList",
        "MoreSmallListVert",
        "MoreVertical",
        "Move",
        "MoveLeftRight",
        "MoveTo",
        "MoveUpDown",
        "MovieCamera",
        "Multiple",
        "MultipleAdd",
        "MultipleCheck",
        "MultipleExclude",
        "NamingOrder",
        "NewItem",
        "News",
        "NewsAdd",
        "NoEdit",
        "Note",
        "NoteAdd",
        "OS",
        "Offer",
        "OfferDelete",
        "OnAir",
        "OpenIn",
        "OpenInLight",
        "OpenRecent",
        "OpenRecentOutline",
        "Orbit",
        "Organisations",
        "Organize",
        "OutlinePath",
        "PaddingBottom",
        "PaddingLeft",
        "PaddingRight",
        "PaddingTop",
        "PageBreak",
        "PageExclude",
        "PageGear",
        "PageRule",
        "PageShare",
        "PageTag",
        "PagesExclude",
        "Pan",
        "Panel",
        "Paste",
        "PasteHTML",
        "PasteList",
        "PasteText",
        "Pattern",
        "Pause",
        "PauseCircle",
        "Pawn",
        "Pending",
        "PeopleGroup",
        "PersonalizationField",
        "Perspective",
        "PinOff",
        "PinOn",
        "Pivot",
        "PlatformDataMapping",
        "Play",
        "PlayCircle",
        "Plug",
        "Polygon",
        "PolygonSelect",
        "PopIn",
        "Portrait",
        "Preset",
        "Preview",
        "Print",
        "PrintPreview",
        "Project",
        "ProjectAdd",
        "ProjectEdit",
        "ProjectNameEdit",
        "Promote",
        "Properties",
        "PropertiesCopy",
        "PublishCheck",
        "PublishPending",
        "PublishReject",
        "PublishRemove",
        "PublishSchedule",
        "PushNotification",
        "Question",
        "QuickSelect",
        "RSS",
        "RadialGradient",
        "Rail",
        "RailBottom",
        "RailLeft",
        "RailRight",
        "RailRightClose",
        "RailRightOpen",
        "RailTop",
        "RangeMask",
        "RealTimeCustomerProfile",
        "RectSelect",
        "Rectangle",
        "Redo",
        "Refresh",
        "RegionSelect",
        "Relevance",
        "Remove",
        "RemoveCircle",
        "Rename",
        "Reorder",
        "Replay",
        "Replies",
        "Reply",
        "ReplyAll",
        "Report",
        "ReportAdd",
        "Resize",
        "Retweet",
        "Reuse",
        "Revenue",
        "Revert",
        "Rewind",
        "RewindCircle",
        "Ribbon",
        "RotateCCW",
        "RotateCCWBold",
        "RotateCW",
        "RotateCWBold",
        "RotateLeft",
        "RotateLeftOutline",
        "RotateRight",
        "RotateRightOutline",
        "SMS",
        "SMSKey",
        "SMSLightning",
        "SMSRefresh",
        "SQLQuery",
        "Sampler",
        "Sandbox",
        "SaveAsFloppy",
        "SaveFloppy",
        "SaveTo",
        "SaveToLight",
        "Scribble",
        "Search",
        "Seat",
        "SeatAdd",
        "Segmentation",
        "Segments",
        "Select",
        "SelectAdd",
        "SelectBox",
        "SelectBoxAll",
        "SelectCircular",
        "SelectContainer",
        "SelectGear",
        "SelectIntersect",
        "SelectSubtract",
        "Selection",
        "SelectionChecked",
        "SelectionMove",
        "Send",
        "SentimentNegative",
        "SentimentNeutral",
        "SentimentPositive",
        "Separator",
        "Servers",
        "Settings",
        "Shapes",
        "Share",
        "ShareAndroid",
        "ShareCheck",
        "ShareLight",
        "ShareWindows",
        "Sharpen",
        "Shield",
        "Ship",
        "Shop",
        "ShoppingCart",
        "ShowAllLayers",
        "ShowMenu",
        "ShowOneLayer",
        "Shuffle",
        "Slice",
        "Slow",
        "SmallCaps",
        "Snapshot",
        "SocialNetwork",
        "SortOrderDown",
        "SortOrderUp",
        "Spam",
        "Spellcheck",
        "Spin",
        "SplitView",
        "SpotHeal",
        "Stadium",
        "Stage",
        "Stamp",
        "Star",
        "StarOutline",
        "Starburst",
        "StepBackward",
        "StepBackwardCircle",
        "StepForward",
        "StepForwardCircle",
        "Stop",
        "StopCircle",
        "Stopwatch",
        "Straighten",
        "StraightenOutline",
        "StrokeWidth",
        "Subscribe",
        "SubtractBackPath",
        "SubtractFromSelection",
        "SubtractFrontPath",
        "SuccessMetric",
        "Summarize",
        "Survey",
        "Switch",
        "Sync",
        "SyncRemove",
        "Table",
        "TableAdd",
        "TableAndChart",
        "TableColumnAddLeft",
        "TableColumnAddRight",
        "TableColumnMerge",
        "TableColumnRemoveCenter",
        "TableColumnSplit",
        "TableEdit",
        "TableHistogram",
        "TableMergeCells",
        "TableRowAddBottom",
        "TableRowAddTop",
        "TableRowMerge",
        "TableRowRemoveCenter",
        "TableRowSplit",
        "TableSelectColumn",
        "TableSelectRow",
        "TagBold",
        "TagItalic",
        "TagUnderline",
        "Target",
        "Targeted",
        "TaskList",
        "Teapot",
        "Temperature",
        "TestAB",
        "TestABEdit",
        "TestABGear",
        "TestABRemove",
        "TestProfile",
        "Text",
        "TextAdd",
        "TextAlignCenter",
        "TextAlignJustify",
        "TextAlignLeft",
        "TextAlignRight",
        "TextBaselineShift",
        "TextBold",
        "TextBulleted",
        "TextBulletedAttach",
        "TextBulletedHierarchy",
        "TextBulletedHierarchyExclude",
        "TextColor",
        "TextDecrease",
        "TextEdit",
        "TextExclude",
        "TextIncrease",
        "TextIndentDecrease",
        "TextIndentIncrease",
        "TextItalic",
        "TextKerning",
        "TextLetteredLowerCase",
        "TextLetteredUpperCase",
        "TextNumbered",
        "TextParagraph",
        "TextRomanLowercase",
        "TextRomanUppercase",
        "TextSize",
        "TextSizeAdd",
        "TextSpaceAfter",
        "TextSpaceBefore",
        "TextStrikethrough",
        "TextStroke",
        "TextStyle",
        "TextSubscript",
        "TextSuperscript",
        "TextTracking",
        "TextUnderline",
        "ThumbDown",
        "ThumbDownOutline",
        "ThumbUp",
        "ThumbUpOutline",
        "Tips",
        "Train",
        "TransferToPlatform",
        "Transparency",
        "Trap",
        "TreeCollapse",
        "TreeCollapseAll",
        "TreeExpand",
        "TreeExpandAll",
        "TrendInspect",
        "TrimPath",
        "Trophy",
        "Type",
        "USA",
        "Underline",
        "Undo",
        "Ungroup",
        "Unlink",
        "Unmerge",
        "UploadToCloud",
        "UploadToCloudOutline",
        "User",
        "UserActivity",
        "UserAdd",
        "UserAdmin",
        "UserArrow",
        "UserCheckedOut",
        "UserDeveloper",
        "UserEdit",
        "UserExclude",
        "UserGroup",
        "UserLock",
        "UserShare",
        "UsersAdd",
        "UsersExclude",
        "UsersLock",
        "UsersShare",
        "Variable",
        "VectorDraw",
        "VideoCheckedOut",
        "VideoFilled",
        "VideoOutline",
        "ViewAllTags",
        "ViewBiWeek",
        "ViewCard",
        "ViewColumn",
        "ViewDay",
        "ViewDetail",
        "ViewGrid",
        "ViewList",
        "ViewRow",
        "ViewSingle",
        "ViewStack",
        "ViewWeek",
        "ViewedMarkAs",
        "Vignette",
        "Visibility",
        "VisibilityOff",
        "Visit",
        "VisitShare",
        "VoiceOver",
        "VolumeMute",
        "VolumeOne",
        "VolumeThree",
        "VolumeTwo",
        "Watch",
        "WebPage",
        "WebPages",
        "Workflow",
        "WorkflowAdd",
        "Wrench",
        "ZoomIn",
        "ZoomOut"
      ]
    },
    "variant": {
      "type": "string",
      "enum": [
        "neutral",
        "info",
        "positive",
        "negative",
        "indigo",
        "yellow",
        "magenta",
        "fuchsia",
        "purple",
        "seafoam",
        "accent",
        "notice",
        "gray",
        "red",
        "orange",
        "chartreuse",
        "celery",
        "green",
        "cyan",
        "blue",
        "pink",
        "turquoise",
        "brown",
        "cinnamon",
        "silver"
      ]
    },
    "style": {
      "type": "string",
      "enum": [
        "bold",
        "subtle",
        "outline"
      ]
    },
    "fixed": {
      "type": "string",
      "enum": [
        "none",
        "top",
        "right",
        "bottom",
        "left"
      ],
      "default": "none"
    },
    "isDisabled": {
      "type": "boolean",
      "default": false
    },
    "size": {
      "type": "string",
      "pattern": "^(x?s|m|x{0,3}l)$",
      "enum": [
        "s",
        "m",
        "l",
        "xl"
      ],
      "default": "s"
    }
  }
}