Roblox UI size Troubles. [TOP BAR]

I am trying to make a ui like this one:

However my settings button wont optinize properly also i was wondering if anyone knew the size?


What do you mean ‘optinize’? If you mean it doesn’t work (as in you can’t click it), that’s a Roblox thing where buttons above {0,0} won’t actually fire any events. You’ll need to hook onto the UserInputService click detector and manually check if the mouse is in the area.

Use the following code:

local UserInputService = game:GetService("UserInputService")
-- Put a button on screen for testing
local TextButton ="TextButton","ScreenGui",game.Players.LocalPlayer.PlayerGui))
TextButton.Position =,100,0,-36)
TextButton.Text = "Test"
TextButton.Size =,100,0,36)

-- Check for all inputs detectable.
    -- Ignore non-touch or non-mouse events
    if not (input.UserInputType == Enum.UserInputType.Touch or input.UserInputType == Enum.UserInputType.MouseButton1) then return end
    -- Check the cursor was inside the button
    if input.Position.X >= TextButton.AbsolutePosition.X and input.Position.X <= TextButton.AbsolutePosition.X + TextButton.AbsoluteSize.X and
       input.Position.Y >= TextButton.AbsolutePosition.Y and input.Position.Y <= TextButton.AbsolutePosition.Y + TextButton.AbsoluteSize.Y then
        TextButton.Text = "🎉 🎉 🎉"

The top bar in 36 pixels in height (except for on XBOX. However, as for widths I really don’t know as I think it’s based on device.

Edit: if you mean that it won’t fire, this was something that happened a long time ago as the top bar used to not be transparent.

what i mean is what is the size in like ui scale or how do i make my own buttons like those?

1 Like

Ah, use Topbar+:

You want your button to have position of {0,101},{0,-32} (with IgnoreGuiInset off), and have a size of {0,32},{0,32}

To get the proper background, make it an image button with the image rbxasset://textures/ui/TopBar/iconBase@3x.png, with a ScaleType set to Slice and SliceCenter set to 48, 48, 48, 48

Turn on IgnoreGuiInset on your ScreenGui.

The developer used TopbarPlus v2 to achieve that:

local Icon = require(game.ReplicatedStorage.Icon)

-- Leftward icons

-- Rightward icons

My hero! Was looking for exactly this! :slight_smile:

1 Like