Custom Topbar Buttons Module - Version 4.0.1

Custom topbar buttons module Made by Stonetr03

My Topbar buttons module just adds more buttons to the top bar and you can configure the buttons and sizes. I also made this because I found Topbar+ a big hard to learn / Use

In 4.0.0 Update you can Configure Buttons, Example :
image

If you would like to see more Customization features please reply to the forum post.

Module :

https://www.roblox.com/library/5969925996/Custom-Topbar-Buttons-Module

Version 2.0.0 Change Log
  • Added Dropdown Buttons
Version 3.0.0 Change Log
  • Removed ability to add/edit/remove buttons From the Server, If you want to still be able to do this download the v2.0 code from Github

  • Rewrote code for creating the GUIs.

Version 4.0.0 Change Log
  • Added Customization to Buttons

  • Minor Improvements / Bug Fixes

Version 4.0.1 Change Log
  • Fixed Dropdown Buttons

Topbar Buttons Module v4.0.0 API :

Adding a button

Adding a button


Module:Add("Button Name",ImageId, Left Side of Topbar true/false, Configurization Table See Configuring a Buttons appearance for more info)

This will return the button property, that can now allow you to call Button.MouseButton1Clicked or something like that

If there was an error or one of the required properties isn’t filled out properly, the function will return false

The first property is the button name

The second property is the ImageId which will show up on the topbar

The third property is if you want it on the left side or the right side of the topbar, setting this value to true will make it on the left side, setting this value to false will make the button be on the right side of the topbar

The fourth property is an optional configuration table that calls Module:ConfigButton() for you so your code is cleaner.

image

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

local Button = TopbarModule:Add("Client Example Button","rbxassetid://5898088380",true,{
	Width = UDim.new(0.1,30),
	ScaleType = Enum.ScaleType.Stretch,
	SliceCenter = Rect.new(Vector2.new(10,10),Vector2.new(10,10)),
	BaseColor = Color3.fromRGB(0,255,0),
	IconColor = Color3.fromRGB(0,0,255)
})

Button.MouseButton1Click:Connect(function()

    print("Clicked!")

end)

image

*Gear icon was from the toolbox on search of “Settings”

Removing a button

Removing a button


Module:Remove("Button Name")

This will return true if successfully removed, or the function will return false if there was an error while removing it

The first property is the Button Name

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:Remove("Example Button")

Hiding a button

Hiding a button


Module:Hide("Button Name")

This will return true if successfully hid, or the function will return false if there was an error while hiding it

The first property is the Button Name

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:Hide("Example Button")

Showing a button

Showing button


Module:Show("Button Name")

This will return true if successfully shown, or the function will return false if there was an error while showing it

The first property is the Button Name

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:Show("Example Button")

Changing a buttons image

Changing a button’s image


Module:ChangeImage("Button Name", ImageId)

This will return true if successfully changed, or the function will return false if there was an error while changing it

The first property is the Button Name

The second property is the ImageId also include the “rbxassetid://”

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:ChangeImage("Example Button","http://www.roblox.com/asset/?id=5010019455")

Get notification value

Get Notification Value


Module:GetAmount("Button Name")

This will return the amount in the notification icon, or the function will return false if there was an error while getting the value

The first property is the Button Name

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

print(TopbarModule:GetAmount("Example Button"))

Set Notification Value

Set Notification Value


Module:SetAmount("Button Name",Amount)

This will return true if successfully set the amount, or the function will return false if there was an error while setting the value

The first property is the Button Name

The second property is the amount

image

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:SetAmount("Example Button",10)

Add notification value

Add Notification Value


Module:AddAmount("Button Name",Amount)

This will return true if successfully set the amount, or the function will return false if there was an error while setting the value

The first property is the Button Name

The second property is the amount

image

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:AddAmount("Example Button",1)

Remove Notification Value

Remove Notification Value


Module:RemoveAmount("Button Name",Amount)

This will return true if successfully set the amount, or the function will return false if there was an error while setting the value

The first property is the Button Name

The second property is the amount

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:RemoveAmount("Example Button",1)

Add Dropdown Button

Add Dropdown button


Module:CreateDropdownButton("Dropdown Button name","Topbar button name","Text")

This will return the button instance if successfully added the button, or the function will return false if there was an error while adding the button

The first property is the Dropdown Button Name

The second property is the Name of the button that will be added too

The third property is the Text that will be added to the dropdown button

image

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:CreateDropdownButton("ExampleDropdown","TopbarButtonName","Dropdown Button!")

Remove Dropdown Button

Removing Dropdown button


Module:RemoveDropdownButton("Dropdown Button name","Topbar button name")

This will return true if successfully removed the button, or the function will return false if there was an error while removing the button

The first property is the Dropdown Button Name

The second property is the Name of the top bar button that the Dropdown Button is in

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:RemoveDropdownButton("ExampleDropdown","TopbarButtonName")

Hide Dropdown Button

Hideing Dropdown button


Module:HideDropdownButton("Dropdown Button name","Topbar button name")

This will return true if successfully hid the button, or the function will return false if there was an error while hiding the button

The first property is the Dropdown Button Name

The second property is the Name of the top bar button that the button is in

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:HideDropdownButton("ExampleDropdown","TopbarButtonName")

Show Dropdown Button

Showing Dropdown button


Module:ShowDropdownButton("Dropdown Button name","Topbar button name")

This will return true if successfully shown the button, or the function will return false if there was an error while hiding the button

The first property is the Dropdown Button Name

The second property is the Name of the top bar button that the button is in

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:ShowDropdownButton("ExampleDropdown","TopbarButtonName")

Edit Dropdown Button Text

Edit Dropdown button Text


Module:EditDropdownButton("Dropdown Button name","Topbar button name","New Text")

This will return true if edited the button, or the function will return false if there was an error while hiding the button

The first property is the Dropdown Button Name

The second property is the Name of the top bar button that the button is in

The third property is the New Text

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:EditDropdownButton("ExampleDropdown","TopbarButtonName","New Text!")

Reset Dropdown Button Size

Reset Dropdown button Size


Module:ResetDropdownSize("Topbar button name")

This will return true if reset the button size, or the function will return false if there was an error while hiding the button

The first property is the Top bar Button Name

Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:EditDropdownButton("TopbarButtonName")

Configure a button's appearance

Configure a button’s appearance


Module:ConfigButton("Topbar button name",Configure Table)

This will return nothing if the button was successfully configured, or the function will return false if there was an error while configuring the button

The first property is the Topbar Button Name

The second property is a table that looks like this :

{
	Width = UDim.new(0.1,30),
	ScaleType = Enum.ScaleType.Stretch,
	SliceCenter = Rect.new(Vector2.new(10,10),Vector2.new(10,10)),
	BaseColor = Color3.fromRGB(0,255,0),
	IconColor = Color3.fromRGB(0,0,255)
}
Example

local TopbarModule = require(game.ReplicatedStorage.TopbarModule)

TopbarModule:ConfigButton("TopbarButtonName",{
	Width = UDim.new(0.1,30),
	ScaleType = Enum.ScaleType.Stretch,
	SliceCenter = Rect.new(Vector2.new(10,10),Vector2.new(10,10)),
	BaseColor = Color3.fromRGB(0,255,0),
	IconColor = Color3.fromRGB(0,0,255)
})

If there are any bugs please reply to this forum post

54 Likes

Very interesting to use, simple but handy. well done stone.

3 Likes

This should become useful for me as TopBar+ is a bit hard to learn.

3 Likes

Absolutely loving this! Thank you for the clear documentation as well.
Maybe in the future you can try to implement it so you can set your own button themes?

4 Likes

I might use this, as Topbar+ is complicated as @GamersInternational said.

2 Likes

I just added the ability to customize the buttons, but you have to get the new code from GitHub as I forgot to update the Roblox model and I will update it as soon as I can. I’m thinking about adding a UiGradent setting next update.

Edit :
Just updated the Roblox model

Why should this be used instead of Topbar+? Topbar+ is feature-rich and isn’t hard to adopt once you read its thorough documentation. What does this module provide that Topbar+ doesn’t?

1 Like

Topbar+ has more features and I am planning on adding more features that Topbar+ has, I made this module as i found Topbar+ hard to learn and there Documentation at the time didn’t make since when i tried to use it in my game, so i made this module that had basic functionality for adding topbar buttons, And i am planning on adding more features and customize propertys in future updates as well as the customization features I added in the update that I released today.

Am i the only one?

If there’s features, tutorials, documentation, etc which is confusing for TopbarPlus please feel free to let us know (at the post, at the repository, you can DM me, etc). Our goal is to make it as accessible and understandable to developers of all levels, so your feedback really helps in achieving that!

If we like your suggestion/feedback, you’ll find more often or not an update introduced within hours or days of the request.

Also note: working towards a singular, widely-adopted community application is beneficial to everyone, as developers only have to work and become familiar with one API, while the application itself can have time devoted to improving and fixing it.

5 Likes

Hey is there a way to add text instead of an Image to your button?