QButton: A Fully customizable Button

Forum > Packages and Libraries

(1/2) > >>

Ed78z:
I'd just like to share my QButton component! It's very powerful and flexible.

It can act as a normal button, a toggle button, a counter button, or a modal button. You can fully control its shape, colors, multiline text, and icon (TBitmap or TImageList).

Feel free to use it and share your feedback!

Demo:

--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, Forms, Controls, Graphics, Dialogs, QButton; type { TForm1 } TForm1 = class(TForm) procedure FormCreate(Sender: TObject); private BtnPrimary: TQButton; BtnOutline: TQButton; BtnDisabled: TQButton; BtnToggleA: TQButton; BtnToggleB: TQButton; BtnToggleC: TQButton; BtnToggleD: TQButton; BtnRepeat: TQButton; BtnModal: TQButton; FCounter: Integer; // Clicks counter procedure BtnPrimaryClick(Sender: TObject); procedure BtnRepeatClick(Sender: TObject); public end; var Form1: TForm1; implementation {$R *.lfm} { TForm1 } procedure TForm1.FormCreate(Sender: TObject);begin Self.Width := 450; Self.Height := 250; BtnPrimary := TQButton.Create(Self); BtnPrimary.Parent := Self; BtnPrimary.SetBounds(20, 20, 120, 50); BtnPrimary.Caption := 'Save File'#13#10'💾'; BtnPrimary.Color := $00FCFCFC; BtnPrimary.BorderColor := $00CCCCCC; BtnPrimary.BorderWidth := 1; BtnPrimary.RoundCorners := True; BtnPrimary.CornerRadius := 15; BtnPrimary.Font.Color := clBlack; BtnPrimary.Font.Style := []; BtnPrimary.UseHoverColor := True; BtnPrimary.HoverColor := $00FEE0BD; BtnPrimary.PressedColor := clHighlight; BtnPrimary.OnClick := @BtnPrimaryClick; BtnOutline := TQButton.Create(Self); BtnOutline.Parent := Self; BtnOutline.SetBounds(160, 20, 120, 50); BtnOutline.Caption := 'Delete'#13#10'🗑️'; BtnOutline.Color := clWhite; BtnOutline.Font.Color := clMaroon; BtnOutline.Font.Style := [fsBold]; BtnOutline.RoundCorners := False; // Square corners BtnOutline.BorderColor := clBlue; BtnOutline.BorderWidth := 5; BtnOutline.HoverColor := clRed; BtnDisabled := TQButton.Create(Self); BtnDisabled.Parent := Self; BtnDisabled.SetBounds(300, 20, 120, 50); BtnDisabled.Caption := 'No Access'#13#10'🚫'; BtnDisabled.CornerRadius := Width;//Ellipse BtnDisabled.Enabled := False; //Groupped Toggle Button A BtnToggleA := TQButton.Create(Self); BtnToggleA.Parent := Self; BtnToggleA.SetBounds(20, 90, 120, 50); BtnToggleA.Caption := 'Mode A'#13#10'🔘'; BtnToggleA.Color := clAqua; BtnToggleA.DownColor := clTeal; BtnToggleA.Font.Color := clBlack; BtnToggleA.Toggleable := True; BtnToggleA.GroupIndex := 1; BtnToggleA.Down := True; //Groupped Toggle Button B BtnToggleB := TQButton.Create(Self); BtnToggleB.Parent := Self; BtnToggleB.SetBounds(160, 90, 120, 50); BtnToggleB.Caption := 'Mode B'#13#10'⭕'; BtnToggleB.Color := clAqua; BtnToggleB.DownColor := clTeal; BtnToggleB.Font.Color := clBlack; BtnToggleB.Toggleable := True; BtnToggleB.GroupIndex := 1; //Groupped Toggle Button C BtnToggleC := TQButton.Create(Self); BtnToggleC.Parent := Self; BtnToggleC.SetBounds(45, 150, 70, 70); BtnToggleC.Caption := 'Mode C'#13#10'✔️'; BtnToggleC.Color := clAqua; BtnToggleC.CornerRadius:=BtnToggleC.Width; BtnToggleC.DownColor := clTeal; BtnToggleC.Font.Color := clBlack; BtnToggleC.Toggleable := True; BtnToggleC.GroupIndex := 1; //Groupped Toggle Button D BtnToggleD := TQButton.Create(Self); BtnToggleD.Parent := Self; BtnToggleD.SetBounds(160, 160, 120, 50); BtnToggleD.Caption := 'Mode D'#13#10'✖️'; BtnToggleD.Color := clAqua; BtnToggleD.DownColor := clTeal; BtnToggleD.Font.Color := clBlack; BtnToggleD.Toggleable := True; BtnToggleD.GroupIndex := 1; //Continuous Repeat Button BtnRepeat := TQButton.Create(Self); BtnRepeat.Parent := Self; BtnRepeat.SetBounds(300, 90, 120, 50); FCounter := 0; BtnRepeat.Caption := 'Hold Me!'#13#10'Count: 0'; BtnRepeat.Color := clFuchsia; BtnRepeat.Font.Color := clWhite; BtnRepeat.RepeatClick := True; BtnRepeat.RepeatInterval := 150; BtnRepeat.OnClick := @BtnRepeatClick; //Modal Feature Button (Auto-closes the form) BtnModal := TQButton.Create(Self); BtnModal.Parent := Self; BtnModal.SetBounds(300, 160, 120, 50); BtnModal.Caption := 'Close Form'#13#10'(mrCancel)'; BtnModal.Color := clRed; BtnModal.Font.Color := clWhite; BtnModal.Font.Style := [fsBold]; BtnModal.CornerRadius := 10; // Automatically acts as a cancel button and closes the form! No OnClick needed. BtnModal.ModalResult := mrCancel; end; procedure TForm1.BtnPrimaryClick(Sender: TObject);begin ShowMessage('Primary Action Executed!');end; procedure TForm1.BtnRepeatClick(Sender: TObject);begin Inc(FCounter); BtnRepeat.Caption := 'Hold Me!'#13#10'Count: ' + IntToStr(FCounter);end; end.

Xenno:
Keep going!

dbannon:
Hmm, no license ? Lots of people will not be able to use it unless you stamp a license. I suggest the MIT License ...

Can you make the button follow the theme that all the other buttons in a project use ?

Anyway, great idea ! Thanks

Ed78z:

--- Quote from: Xenno on August 03, 2026, 05:25:30 am ---Keep going!

--- End quote ---

Thank you Xenno, here is my QToggleSwitch component, please check it too! :)

--- Code: Pascal [+][-]window.onload = function(){var x1 = document.getElementById("main_content_section"); if (x1) { var x = document.getElementsByClassName("geshi");for (var i = 0; i < x.length; i++) { x[i].style.maxHeight='none'; x[i].style.height = Math.min(x[i].clientHeight+15,306)+'px'; x[i].style.resize = "vertical";}};} ---unit Unit1; {$mode objfpc}{$H+} interface uses Classes, SysUtils, Forms, Controls, Graphics, Dialogs, Buttons, QToggleSwitch; type { TForm1 } TForm1 = class(TForm) procedure FormCreate(Sender: TObject); private FToggle1: TQToggleSwitch; FToggle2: TQToggleSwitch; FToggle3: TQToggleSwitch; FToggle4: TQToggleSwitch; FToggle5: TQToggleSwitch; public end; var Form1: TForm1; implementation {$R *.lfm} { TForm1 } procedure TForm1.FormCreate(Sender: TObject);begin // 1. On / Off Switch FToggle1 := TQToggleSwitch.Create(Self); FToggle1.Parent := Self; FToggle1.SetBounds(40, 20, 80, 26); FToggle1.State := True; FToggle1.TextOn := 'On'; FToggle1.TextOff := 'Off'; FToggle1.BodyColorOn := $00D77800; FToggle1.BodyColorOff := $00EAEAEA; FToggle1.Font.Style := [fsBold]; // 2. Yes / No Switch FToggle2 := TQToggleSwitch.Create(Self); FToggle2.Parent := Self; FToggle2.SetBounds(40, 60, 80, 26); FToggle2.State := False; FToggle2.TextOn := 'Yes'; FToggle2.TextOff := 'No'; FToggle2.BodyColorOn := $0047A532; FToggle2.BodyColorOff := $004A4A9C; FToggle2.KnobColorOff := clWhite; FToggle2.Font.Style := [fsBold]; // 3. True / False Switch FToggle3 := TQToggleSwitch.Create(Self); FToggle3.Parent := Self; FToggle3.SetBounds(40, 100, 100, 26); FToggle3.State := True; FToggle3.TextOn := 'True'; FToggle3.TextOff := 'False'; FToggle3.BodyColorOn := $00B300B3; FToggle3.BodyColorOff := $00EAEAEA; FToggle3.Font.Style := [fsBold]; // 4. Wifi / Lan Switch FToggle4 := TQToggleSwitch.Create(Self); FToggle4.Parent := Self; FToggle4.SetBounds(40, 140, 90, 26); FToggle4.State := False; FToggle4.TextOn := 'Wifi'; FToggle4.TextOff := 'Lan'; FToggle4.BodyColorOn := $0000A5FF; FToggle4.BodyColorOff := $00808000; FToggle4.KnobColorOff := clWhite; FToggle4.Font.Style := [fsBold]; // 5. Like / Dislike Switch FToggle5 := TQToggleSwitch.Create(Self); FToggle5.Parent := Self; FToggle5.SetBounds(40, 180, 70, 15); FToggle5.State := True; FToggle5.TextOn := 'Like'; FToggle5.TextOff := 'Dislike'; FToggle5.BodyColorOn := $005C5CFF; FToggle5.BodyColorOff := $00EAEAEA; FToggle5.KnobColorOn:=clGreen; FToggle5.KnobColorOff:=clBlack; FToggle5.Font.Style := [fsBold]; //FToggle5.Enabled:=False;end; end.

Ed78z:

--- Quote from: dbannon on August 03, 2026, 02:33:12 pm ---Hmm, no license ? Lots of people will not be able to use it unless you stamp a license. I suggest the MIT License ...

Can you make the button follow the theme that all the other buttons in a project use ?

Anyway, great idea ! Thanks

--- End quote ---

Thank you dbannon,
My components are completely FREE to use. I'm just sharing them without any restriction and fully FREE.

Regarding to apply theme: It's easy, I've done it in my DWEdit component, just add QTheme unit to your project and wire the colors to the QTheme...
https://forum.lazarus.freepascal.org/index.php/topic,71946.15.html

Navigation

[0] Message Index

[#] Next page