From Xojo Documentation

You are currently browsing the old Xojo documentation site. Please visit the new Xojo documentation site!
For web apps, see WebButton.

Class (inherits from RectControl)

Used for creating a bevel button. A BevelButton can use text, a graphic, a pop-up menu, or several of these interface elements in combination.

Action DropObject MouseEnter
Close GotFocus MouseExit
ConstructContextualMenu KeyDown MouseMove
ContextualMenuAction KeyUp MouseUp
DragEnter LostFocus MouseWheel
DragExit MenuSelected Open
DragOver MouseDown
Active fa-lock-32.png HasBackgroundColor MouseY fa-lock-32.png
AllowAutoDeactivate Height Name fa-lock-32.png
AllowFocus Icon PanelIndex
AllowTabStop IconAlignment Parent
BackgroundColor IconDeltaX Scope fa-lock-32.png
BevelStyle IconDeltaY TabIndex
Bold Index fa-lock-32.png TextColor
ButtonStyle Italic Tooltip
Caption Left Top
CaptionAlignment LockBottom Transparent
CaptionDelta LockLeft TrueWindow fa-lock-32.png
CaptionPosition LockRight Underline
Enabled LockTop Value
FontName Menu Visible
FontSize MenuStyle Width
FontUnit MouseCursor Window fa-lock-32.png
Handle fa-lock-32.png MouseX fa-lock-32.png
AcceptFileDrop AddActionNotificationReceiver Refresh
AcceptPictureDrop Close RemoveActionNotificationReceiver
AcceptRawDataDrop DrawInto SetFocus
AcceptTextDrop Invalidate
BevelStyles CaptionAlignments IconAlignments
ButtonStyles CaptionPositions MenuStyles


On macOS, BevelButton is not a native control and does not automatically change its appearance in dark mode.

A BevelButton can display a graphic, a label (caption), or both.

The "No Bevel" option for the BevelStyle property is functional only on Microsoft Windows. On platforms with cursor, the button appears to have no border until the cursor enters the bounds of the BevelButton control. Then the outline of the button appears. On non-Windows systems, the "No Bevel" option has the same appearance of "Small Bevel."

Sample Code

The following code places an icon in the BevelButton, aligns it, and specifies the position of the caption. The graphic, "DatabaseQueryIcon," has been added to the project.

Me.Icon = DatabaseQueryIcon
Me.IconAlignment = BevelButton.IconAlignments.TopLeft
Me.CaptionAlignment = BevelButton.CaptionAlignments.Left
Me.CaptionPosition = BevelButton.CaptionPositions.RightOfIcon
Me.IconDeltaX = 2
Me.IconDeltaY = 1

The following code creates a bevel button menu.

Var months() As String = Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

me.Caption = "Month"
me.CaptionAlignment = BevelButton.CaptionAlignments.Left
me.MenuStyle = BevelButton.MenuStyles.Right

Var myMenu As New MenuItem
For Each m As String In months
myMenu.AddMenu(New MenuItem(m))
Next m

me.Menu = myMenu

The following line of code in the BevelButton's MenuSelected event handler sets the BevelButton caption to the value that the user selects:

Me.Caption = SelectedItem.Value

See Also

ComboBox, PopupMenu, PushButton controls.