Preview Updated 2026-05-10

Protocol badge

Color + initial dual-coded badges for 12 protocols. Shared style across HTTP methods and transport protocols.

Basic usage

Supports GET / POST / PUT / PATCH / DELETE / HEAD / OPTIONS (HTTP) plus WS / MQTT / gRPC / SSE / GraphQL (transport / protocol). Colors are driven by --proto-* tokens; the initial-letter encoding keeps them colorblind-friendly.

背景

GETPOSTPUTPATCHDELHEADOPTSWSMQTTgRPCSSEGQL

src/App.vue

<script setup lang="ts">
import { CfProtocolBadge } from '@chufix-design/vue';
const protos = ['get','post','put','patch','del','head','opt','ws','mqtt','grpc','sse','gql'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfProtocolBadge v-for="p in protos" :key="p" :kind="p" />
  </div>
</template>

<script setup>
import { CfProtocolBadge } from '@chufix-design/vue';
const protos = ['get','post','put','patch','del','head','opt','ws','mqtt','grpc','sse','gql'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfProtocolBadge v-for="p in protos" :key="p" :kind="p" />
  </div>
</template>

import { CfProtocolBadge } from '@chufix-design/react';

export default function Demo() {
  return (
    <>
      <CfProtocolBadge kind="get" />
      <CfProtocolBadge kind="post" />
      <CfProtocolBadge kind="grpc" />
      <CfProtocolBadge kind="ws" />
    </>
  );
}

CfMethodBadge alias

CfMethodBadge is an alias export of CfProtocolBadge, semantically dedicated to HTTP method lists.

API

Prop	Type	Default	Description
`kind`	`ProtocolKind \| string`	—	Case-insensitive; unknown values render the original text on a default grey background
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	32×16 / 38×18 / 46×22