Button Widgets
Buttons are the most important interactive elements of your app. BLOCQ offers five button types that you can customize individually.
Overview
Section titled “Overview”| Button Type | Usage | Example |
|---|---|---|
| Primary | Main actions | ”Save”, “Submit” |
| Secondary | Secondary actions | ”Cancel”, “Back” |
| Text | Subtle actions | ”Learn more”, Links |
| Icon | Compact actions | Share, Favorite |
| FAB | Main page action | New post, Add |
Primary Button
Section titled “Primary Button”The most prominent button for the most important actions.
Appearance
Section titled “Appearance”Colors
Section titled “Colors”| Setting | Description |
|---|---|
| Background Color | Fill color of the button |
| Text Color | Color of the label |
| Border Color | Color of the border (when activated) |
Border & Elevation
Section titled “Border & Elevation”| Setting | Range | Description |
|---|---|---|
| Border Width | 0-4 px | Thickness of the border |
| Elevation | 0-24 | Strength of the shadow |
Shadow
Section titled “Shadow”| Setting | Description |
|---|---|
| Shadow Color | Color of the shadow |
| Blur Radius | Softness of the shadow |
| Spread Radius | Spread of the shadow |
| Offset X/Y | Position of the shadow |
Gradient
Section titled “Gradient”| Setting | Description |
|---|---|
| Enable Gradient | Color gradient instead of solid color |
| Start Color | First color of the gradient |
| End Color | Second color of the gradient |
| Direction | Gradient direction (Horizontal, Vertical, Diagonal) |
Layout
Section titled “Layout”| Setting | Range | Description |
|---|---|---|
| Height | 36-64 px | Height of the button |
| Horizontal Padding | 8-48 px | Internal spacing left/right |
| Vertical Padding | 4-24 px | Internal spacing top/bottom |
| Corner Radius | 0-32 px | Rounding of corners |
| Font Size | 12-24 px | Size of the label |
| Icon Size | 16-32 px | Size of the optional icon |
| Icon Spacing | 4-16 px | Spacing between icon and text |
| Font Family | Google Fonts | Font of the label |
States
Section titled “States”For each state you can define separate colors:
Normal
Section titled “Normal”Default state of the button.
Pressed
Section titled “Pressed”| Setting | Description |
|---|---|
| Background Color | Color when pressed |
| Text Color | Text color when pressed |
| Overlay Opacity | Strength of darkening |
Disabled
Section titled “Disabled”| Setting | Description |
|---|---|
| Background Color | Color in disabled state |
| Text Color | Text color in disabled state |
| Opacity | Overall transparency |
| Setting | Description |
|---|---|
| Background Color | Color on focus |
| Text Color | Text color on focus |
| Border Color | Border color on focus |
Advanced
Section titled “Advanced”| Setting | Options | Description |
|---|---|---|
| Splash Effect | On/Off | Ripple animation on tap |
| Animation Duration | 100-500 ms | Duration of state transitions |
| Minimum Width | 0-200 px | Minimum button width |
Secondary Button
Section titled “Secondary Button”For less important actions, usually as outline button.
The settings are identical to the primary button, but with different default values:
- Transparent background
- Colored border
- Colored text
Text Button
Section titled “Text Button”Minimalist button without background.
Specifics
Section titled “Specifics”- No background in normal state
- Only text (and optionally icon)
- Subtle hover/press effect
Settings
Section titled “Settings”Most settings correspond to the primary button. Additionally:
| Setting | Description |
|---|---|
| Underline | Show text underlined |
| Hover Background | Light background on hover |
Icon Button
Section titled “Icon Button”Compact button with icon only.
Specifics
Section titled “Specifics”- Square or round
- Only icon, no text
- Ideal for toolbars
Settings
Section titled “Settings”| Setting | Range | Description |
|---|---|---|
| Size | 32-56 px | Overall size of the button |
| Icon Size | 18-32 px | Size of the icon |
| Background Color | - | Fill color (often transparent) |
| Icon Color | - | Color of the icon |
| Corner Radius | 0-28 px | Rounding (28 = round) |
FAB (Floating Action Button)
Section titled “FAB (Floating Action Button)”Floating action button for the main action of a page.
Specifics
Section titled “Specifics”- Floats over content
- Prominently positioned
- Round by default
Settings
Section titled “Settings”All settings of the primary button, plus:
| Setting | Options | Description |
|---|---|---|
| Size | Mini, Normal, Large | Size variant |
| Extended | On/Off | With text next to icon |
| Position | Left, Center, Right | Horizontal positioning |
| Elevation | 0-24 | Floating height (shadow) |
Extended FAB
Section titled “Extended FAB”When “Extended” is activated:
- Shows icon and text
- Wider, rounded shape
- Additional text settings
Light Mode vs. Dark Mode
Section titled “Light Mode vs. Dark Mode”Each button can have separate colors for Light and Dark Mode:
- Use the toggle in the preview area
- Edit the colors for the respective mode
- Test both modes in the preview
Tip: In Dark Mode, buttons should often be less saturated or brighter to remain visible.
Frequently Asked Questions
Section titled “Frequently Asked Questions”How do I make a completely round button?
Section titled “How do I make a completely round button?”Set the corner radius to half the button height (e.g. height 48 px = radius 24 px).
Can I use different fonts for different buttons?
Section titled “Can I use different fonts for different buttons?”Yes, each button type has its own font setting. However, for consistency it’s recommended to use the same font.
Why does my button look strange in Dark Mode?
Section titled “Why does my button look strange in Dark Mode?”Check if you’ve set the Dark Mode colors separately. Switch to Dark Mode with the toggle and adjust the colors.
What is the difference between Elevation and Shadow?
Section titled “What is the difference between Elevation and Shadow?”- Elevation: Simple elevation with automatic shadow
- Shadow: Full control over the shadow
You can combine both or use only one.