Variants

Variants define reusable class names for variant groups. Core action rendering uses the actionButton variant group.

Action button variants

Actions use action.variant with the actionButton variant group.

export const usersSchema = {
  resource: "users",
  theme: {
    variants: {
      actionButton: {
        primary: "bg-emerald-600 text-white hover:bg-emerald-700",
        danger: "bg-rose-600 text-white hover:bg-rose-700",
        ghost: "text-gray-600 hover:bg-gray-100"
      }
    }
  },
  actions: {
    create: {
      label: "Create user",
      variant: "primary"
    },
    delete: {
      label: "Delete",
      variant: "danger"
    }
  }
} as const;

Fallback behavior

resolveThemeVariant() looks up the requested variant and falls back to default when available.

Built-in variant keys

The built-in presets define common actionButton variants:

• default
• primary
• secondary
• danger
• ghost

Common mistakes

• Define action variants under variants.actionButton; core actions do not read variants.button.
• Use class slots, classNameWhen, or class name resolvers for row and cell styling.