FMX Style Designer Tutorial: Create Button Styles

Go Up to FMX Style Designer

This tutorial demonstrates the complete workflow to create a button style from scratch. In this tutorial, the example creates a style with a rounded background, multiple interaction states, custom text styling, and an optional shadow.

Step 1: Create New Button Style

The first step is to create a new button style. To do so, navigate to the Styles section and right-click on the panel to open the setting options. Select Add Style > Buttons > Button from the context menu.

The designer prompts the user to enter a name; this name is used for organization within the designer itself. Therefore, use a descriptive name such as “Button - Primary”.

Note:
Adding spaces between the dashes creates a nested hierarchy automatically. Following this convention helps organize and find tokens and items more easily as styles grow in number.

Once created, select a new style from the left panel. This action displays the button-specific properties in the right panel.

The most important setting is the FMX Style Name field since this is the identifier that appears in the Delphi’s StyleLookup property dropdown menu. Therefore, it is important to follow naming conventions, such as ButtonPrimary.

Attention:
To ensure a recently created style appears in the StyleLookup dropdown component list, the FMX style name must contain the component name, e.g., Button, without the “T” prefix. Names such as, ButtonStyle01, ButtonPrimary, or PrimaryButton all work correctly. A name like PrimaryStyle will not appear in the component’s dropdown options because it is missing the component identifier, e.g., button.

Step 2: Add Background Resource

With your button style selected, take a look at the properties in the right panel. Locate the Background property. It shows a dropdown menu (currently empty) and a + icon. Click the + sign to create a new background resource inline.

Select Dynamic Image from the menu and name it “Button - Background - Primary”. Dynamic images let you define different backgrounds for different button states (Normal, Hovered, Pressed, etc.).

Step 3: Create Normal State Background

The designer now shows the Dynamic Image resource editor with a list of states: Normal, Hovered, Focused, Pressed, Disabled, and Selected. Each state is optional.

Let’s start with the Normal state, which represents how the button appears without user interaction. Click the + sign next to the Normal state and select Rectangle from the dropdown options. A rectangle is a vector resource, meaning it's defined programmatically rather than loaded from an image file.

The designer automatically creates this resource. Name the resource descriptively, such as "Background - Button - Primary", and place it in a hierarchical structure under the "Button Style" section.

Step 4: Defining your Brand Colors

Before defining a specific color for the rectangle, it is necessary to define the tokens that specify colors. In the rectangle properties, press the + sign next to the property background, and define the name “Color - Primary”.

In the right panel, select the desired primary color. For example, FF2E7D6A returns a teal color at full opacity.

Step 5: Configure Rectangle Appearance

Return to the Background - Button - Primart style properties and notice how the new Color - Primary token is automatically assigned.

The following are the other properties that can be configured to change the appearance:

• Background: Defines the background color. Any previously defined colors appear in the dropdown menu and can be used.
• Stroke Color: Adds a border by assigning a predefined color.
• Corner Radius: Creates rounded corners.

For this tutorial, let’s add rounded corners. Enter a value, such as 16, and watch the center preview panel update in real time.

Tip:
Corner Radius requires a numeric value that can be entered directly in the property, but a better practice is to define another token value of type “Sizes” that can be reused in multiple other properties. This allows defining real hierarchical structures, and changing the radius of all buttons is done in a single place.

Step 6: Adjust Button Padding

Next, let’s adjust the button’s padding. To do so, return to the button style options by navigating to Styles > Button > Primary and locating the padding sections Padding and Content Padding.

Padding: Defines the space outside the visual background. This is primarily useful when the background includes effects that extend beyond the component’s semantic boundary, such as shadows.

Content Padding: Defines the space between the button’s semantic edge and its content (the text or icon). Configure it using the four independent values: L (Left), R (Right), T (Top), and B (Bottom).

This tutorial uses the following padding values:

• Padding: 0
• Content Padding: Left: 12, Right: 12, Top: 6, Bottom: 6

These values create breathing room around the button's content. Horizontal padding is typically larger than vertical padding for buttons, though this can vary by platform.

Step 7: Add Interactive States

To explore the different interactive states, navigate back to the background resource Button - Background - Primary in the left panel. The Dynamic Image editor should be visible with the list of states. For this tutorial, let’s configure the Hovered and Pressed states.

Hover State
1. Click the + sign next to the Hovered state and select Rectangle.
2. Configure it and define it with a different color, such as a slightly lighter color.

Tip:
For example, if the Normal state color is FF2E7D6A, then for the Hover state lets use FF3D8C79 .

3. Name it “Color - Primary-light”.

Pressed State
1. Click the + sign next to the Pressed state and select Rectangle.
2. Configure it and define it with another color variation, such as FF236856 .
3. Following the suggested naming convention, name it “Color - Primary - Dark”.

Step 8: Configure Text Styling

Navigate to the button style properties and expand the Text section. Here, let’s create a new Typography to configure a custom font and color.

1. Click the + sign next to the Font dropdown.
2. Enter a parameter name; “Button”.
3. Configure the text’s Family, Weight, and Size: “Roboto”, “Medium”, “16”.
4. Click the + sign next to the Colors dropdown and select Dynamic Color.
5. Next. define text colors for each state. For this tutorial, let’s define the following:

• Normal: Create a new token “Color - White”;FFFFFFFF.
• Hovererd: light gray for a subtle variation;FFF5F5F5.
• Pressed: slightly darker;FFE0E0E0.

The text in the preview panel should now display the chosen font and color, and the color should change subtly when the button is interacted with.

Step 9: Add Shadow

Adding a shadow to the button adds depth and helps it stand out from the background. Adding a shadow can significantly improve the button’s visual, but this step is optional.

This tutorial adds a subtle shadow to the button using the following settings:

• Color: Create a new token “Color - Black”; FF000000
• Direction: 90
• Distance: 10
• Opacity: 0.3
• Softness: 0.8

Tip:
Shadows can be reused among multiple styles. It’s considered good practice to define different types, such as xl, lg, md, sm, and xs, to represent the shadow's elevation or darkness.

Step 10: Set Fixed Size

Another optional feature is to set a fixed size for the button. Many design systems specify standard component heights for consistency.

Buttons have a Fixed Size property that defines a fixed width and height.

Enter a specific value, or create a Size parameter to reuse it across styles.

Tip:
For width, it is recommended to leave it as Flexible so the button adapts to its content.

Step 11: Export and Use in RAD Studio

Now that the button style is complete, let’s export it to RAD Studio by going to File > Export. Name the file (e.g., nystyles.fsf), select a location, and click Save.

Note:
For more information on exporting, see the Integration section.

To use the file in RAD Studio follow the steps below:

1. Drop a TStyleBook component onto the form.
2. Set the form’s StyleBook property to reference the TStyleBook component.
3. Double-click the TStyleBook component and in a new tab, click the Open button and select the style file previously exported.
4. Close the Style Designer tab and apply changes.
5. Drop a TButton and select the custom style from its StyleLookup property.

The dropdown automatically filters to show only styles appropriate for the selected component type. This filtering is based on the style name containing the component name.

See Also

• FMX Style Designer
• FMX Style Designer Features