HttpMethodBadge

Domain · API Doc

Color-coded badge for HTTP methods — GET, POST, PUT, PATCH, DELETE, and more.

Preview

GETPOSTPUTPATCHDELETEHEADOPTIONS

Code

<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'GET' }) %>
<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'POST' }) %>
<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'DELETE' }) %>

Preview

GET GET GET

Code

<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'GET', size: 'sm' }) %>
<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'GET', size: 'md' }) %>
<%- include('modules/domain/api-doc/HttpMethodBadge', { method: 'GET', size: 'lg' }) %>

<%
  var _method = (locals.method || '').toUpperCase();
  var _size   = locals.size || 'md';

  var methodStyles = {
    GET:     'bg-success-subtle text-success-fg border-success/30',
    POST:    'bg-primary-subtle text-primary border-primary/30',
    PUT:     'bg-warning-subtle text-warning-fg border-warning/30',
    PATCH:   'bg-warning-subtle text-warning-fg border-warning/30',
    DELETE:  'bg-error-subtle text-error-fg border-error/30',
    HEAD:    'bg-surface-sunken text-text-secondary border-border',
    OPTIONS: 'bg-surface-sunken text-text-secondary border-border',
    TRACE:   'bg-surface-sunken text-text-secondary border-border',
  };

  var sizeClass = _size === 'sm' ? 'text-[10px] px-1.5 py-0 min-w-[38px]'
                : _size === 'lg' ? 'text-sm px-3 py-1 min-w-[60px]'
                :                  'text-xs px-2 py-0.5 min-w-[48px]';

  var style = methodStyles[_method] || 'bg-surface-sunken text-text-secondary border-border';
%>

  <%= _method %>

HttpMethodBadge

All methods

Sizes