Preview Updated 2026-05-10

MethodBadge

Alias of ProtocolBadge dedicated to the HTTP method context. API is identical.

CfMethodBadge is an alias export for CfProtocolBadge. When the context is unambiguously about HTTP methods, importing CfMethodBadge expresses intent more precisely; at runtime it is the same component.

Basic Usage

Use it when the value is specifically an HTTP method. Colors and sizing follow ProtocolBadge.

背景视口

GETPOSTPUTPATCHDELHEADOPTS

src/App.vue

<script setup lang="ts">
import { CfMethodBadge } from '@chufix-design/vue';

const methods = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfMethodBadge v-for="method in methods" :key="method" :kind="method" />
  </div>
</template>

<script setup>
import { CfMethodBadge } from '@chufix-design/vue';

const methods = ['get', 'post', 'put', 'patch', 'delete', 'head', 'options'];
</script>
<template>
  <div class="demo-row" style="flex-wrap: wrap;">
    <CfMethodBadge v-for="method in methods" :key="method" :kind="method" />
  </div>
</template>

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

export default function Demo() {
  return (
    <>
      <CfMethodBadge kind="get" />
      <CfMethodBadge kind="post" />
      <CfMethodBadge kind="put" />
      <CfMethodBadge kind="delete" />
    </>
  );
}

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

export default function Demo() {
  return (
    <>
      <CfMethodBadge kind="get" />
      <CfMethodBadge kind="post" />
      <CfMethodBadge kind="put" />
      <CfMethodBadge kind="delete" />
    </>
  );
}

Import

// Vue
import { CfMethodBadge } from '@chufix-design/vue';

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

See ProtocolBadge for the full API.