Search documentation of phoenix_kit

# PhoenixKitWeb.Components.Core.Badge (phoenix_kit v1.7.87)

Copy Markdown View Source

Provides badge UI components for status, roles, and labels.

Supports different variants for system roles, user statuses, and custom labels. All badge components follow daisyUI badge styling conventions.

## Summary

### Functions

category_badge(assigns)

Renders a category badge for email templates.

code_status_badge(assigns)

Renders a code status badge for referral codes.

enabled_badge(assigns)

Renders an enabled/disabled status badge.

role_badge(assigns)

Renders a role badge with appropriate styling based on role type.

status_badge(assigns)

Renders a generic status badge from a status string.

user_status_badge(assigns)

Renders a user status badge (active/inactive/unconfirmed).

## Functions

# category_badge(assigns)

Renders a category badge for email templates.

## Attributes

- `category` - Template category: "system", "marketing", "transactional"
- `size` - Badge size (default: :sm)
- `class` - Additional CSS classes

## Examples

    <.category_badge category="system" />
    <.category_badge category="marketing" size={:md} />

## Attributes

- `category` (`:string`) (required)
- `size` (`:atom`) - Defaults to `:sm`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
- `class` (`:string`) - Defaults to `""`.

# code_status_badge(assigns)

Renders a code status badge for referral codes.

## Attributes

- `code` - Code struct with uses_count, max_uses, and expiration_date fields
- `size` - Badge size (default: :md)

## Examples

    <.code_status_badge code={referral_code} />
    <.code_status_badge code={code} size={:sm} />

## Attributes

- `code` (`:map`) (required)
- `size` (`:atom`) - Defaults to `:md`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.

# enabled_badge(assigns)

Renders an enabled/disabled status badge.

## Attributes

- `enabled` - Boolean enabled status
- `size` - Badge size (default: :sm)
- `class` - Additional CSS classes

## Examples

    <.enabled_badge enabled={endpoint.enabled} />
    <.enabled_badge enabled={false} size={:md} />

## Attributes

- `enabled` (`:boolean`) (required)
- `size` (`:atom`) - Defaults to `:sm`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
- `class` (`:string`) - Defaults to `""`.

# role_badge(assigns)

Renders a role badge with appropriate styling based on role type.

## Attributes

- `role` - Role struct with name and is_system_role fields
- `size` - Badge size: :xs, :sm, :md, :lg (default: :md)
- `class` - Additional CSS classes

## Examples

    <.role_badge role={user.role} />
    <.role_badge role={role} size={:sm} />
    <.role_badge role={custom_role} class="ml-2" />

## Attributes

- `role` (`:map`) (required)
- `size` (`:atom`) - Defaults to `:md`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
- `class` (`:string`) - Defaults to `""`.

# status_badge(assigns)

Renders a generic status badge from a status string.

Maps common status values to appropriate badge colors. Covers statuses used across PhoenixKit modules (catalogue items, entities, users, etc.).

## Attributes

- `status` - Status string (required)
- `size` - Badge size (default: :sm)
- `class` - Additional CSS classes

## Examples

    <.status_badge status="active" />
    <.status_badge status="deleted" size={:xs} />
    <.status_badge status="discontinued" class="ml-2" />

## Attributes

- `status` (`:string`) (required)
- `size` (`:atom`) - Defaults to `:sm`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.
- `class` (`:string`) - Defaults to `""`.

# user_status_badge(assigns)

Renders a user status badge (active/inactive/unconfirmed).

## Attributes

- `is_active` - Boolean user active status
- `confirmed_at` - DateTime of email confirmation or nil
- `size` - Badge size (default: :md)

## Examples

    <.user_status_badge is_active={user.is_active} confirmed_at={user.confirmed_at} />
    <.user_status_badge is_active={false} confirmed_at={nil} size={:sm} />

## Attributes

- `is_active` (`:boolean`) (required)
- `confirmed_at` (`:any`) - Defaults to `nil`.
- `size` (`:atom`) - Defaults to `:md`. Must be one of `:xs`, `:sm`, `:md`, or `:lg`.