How do you create a badge index gui in-game?

Hello there! I will explain you how to do that.

First, we have to make a table where we will store every badge id we want for index:

local BadgeIDs = {1, 2, 3} -- 1, 2 and 3 are just examples by the way

Then, we will use UserHasBadgeAsync along with GetBadgeInfoAsync (Part of BadgeService ) to check if the user has the badge and get informations about it:

local badgeIDs = {100, 200}
local BadgeService = game:GetService("BadgeService")

game.Players.PlayerAdded:Connect(function(player) -- Connect to PlayerAdded event
for i,v in pairs(badgeIDs) do
	local success, hasBadge = pcall(function() -- Make a protected call, useful for handling errors.
		return BadgeService:UserHasBadgeAsync(player.UserId, v)
	    end)
	end
end)

Quick note: success will return either false or true, use this for error handling

Now, we have to create the new buttons for the badge.

local success2, result = pcall(function()
			return BadgeService:GetBadgeInfoAsync(v)
		end)
		
		local label = Instance.new("TextLabel", player.PlayerGui.ScreenGui.Frame) -- Change ScreenGui.Frame to
		-- The frame where you want the buttons to be
		
		if success2 then -- Example of handling errors
			label.Text = result.Name
			label.Name = result.Name
		else
			warn("Unable to fetch data about "..v)
		end
		
		if hasBadge then 
			label.BackgroundColor3 = Color3.new(0.666667, 1, 0) -- Green color for owned badge
		else
			label.BackgroundColor3 = Color3.new(1, 0, 0) -- Red color for not owned badge
		end	

Last, we will connect the event MouseButton1Down of buttons to display a frame

v.MouseButton1Down:Connect(function()
       if not player.PlayerGui.ScreenGui.Hint.Visible then
       player.PlayerGui.ScreenGui.Hint.Visible = true
        else
        player.PlayerGui.ScreenGui.Hint.Visible = false
       end
end)

Now, your code should look like that:

local badgeIDs = {100, 200}
local BadgeService = game:GetService("BadgeService")

game.Players.PlayerAdded:Connect(function(player) -- Connect to PlayerAdded event
for i,v in pairs(badgeIDs) do
		
		local success, hasBadge = pcall(function() -- Make a protected call, useful for handling errors.
		return BadgeService:UserHasBadgeAsync(player.UserId, v)
		end)
		
		local success2, result = pcall(function()
			return BadgeService:GetBadgeInfoAsync(v)
		end)
		
		local label = Instance.new("TextLabel", player.PlayerGui.ScreenGui.Frame) -- Change ScreenGui.Frame to
		-- The frame where you want the buttons to be
		
		if success2 then -- Example of handling errors
			label.Text = result.Name
			label.Name = result.Name
		else
			warn("Unable to fetch data about "..v)
		end
		
		if hasBadge then 
			label.BackgroundColor3 = Color3.new(0.666667, 1, 0) -- Green color for owned badge
		else
			label.BackgroundColor3 = Color3.new(1, 0, 0) -- Red color for not owned badge
		end	
		label.MouseButton1Down:Connect(function()
			if not player.PlayerGui.ScreenGui.Hint.Visible then
				player.PlayerGui.ScreenGui.Hint.Visible = true
			else
				player.PlayerGui.Hint.Visible = false
			end
		end)
	end
end)

If you want to read more about badge service, visit this Hope it helped!