Advanced Usage

Form Button Customization

Button Style

When you use form related macros, you have a couple ways to style buttons. Before we start to dive into the solutions, let’s review some Fomantic basics: In Fomantic, you have 17 basic button style and 16 inverted button style, so you have 16 inverted+basic button style classes:

Basic: A basic button is less pronounced

  • primary basic

  • secondary basic

  • positive basic

  • negative basic

  • red basic

  • orange basic

  • yellow basic

  • olive basic

  • green basic

  • teal basic

  • blue basic

  • violet basic

  • purple basic

  • pink basic

  • brown basic

  • grey basic

  • black basic

Inverted: A button can be formatted to appear on dark backgrounds

  • inverted

  • inverted primary

  • inverted secondary

  • inverted red

  • inverted orange

  • inverted yellow

  • inverted olive

  • inverted green

  • inverted teal

  • inverted blue

  • inverted violet

  • inverted purple

  • inverted pink

  • inverted brown

  • inverted grey

  • inverted black

Inverted + basic: Combine two styles.

  • inverted basic

  • inverted primary basic

  • inverted secondary basic

  • inverted red basic

  • inverted orange basic

  • inverted yellow basic

  • inverted olive basic

  • inverted green basic

  • inverted teal basic

  • inverted blue basic

  • inverted violet basic

  • inverted purple basic

  • inverted pink basic

  • inverted brown basic

  • inverted grey basic

  • inverted black basic

You will use these names in Flask-FomanticUI. First, you configuration variables FOMANTIC_BUTTON_STYLE to set a global form button style:

from flask import Flask
from flask_fomanticui import FomanticUI

app = Flask(__name__)
fomantic = FomanticUI(app)

app.config['FOMANTIC_BUTTON_STYLE'] = 'inverted black basic'

Or you can use button_style parameter when using render_ui_form, render_ui_field and render_ui_form_row, this parameter will overwrite FOMANTIC_BUTTON_STYLE:

{% from 'fomantic/form.html' import render_ui_form %}

{{ render_ui_form(form, button_style='positive basic') }}

Button Size

Similarly, you can use this way to control the button size. In Fomantic UI, buttons can have 8 sizes:

  • mini

  • tiny

  • small

  • medium

  • large

  • big

  • huge

  • massive

So, the size names used in Flask-FomanticUI will be:

  • mini

  • tiny

  • small

  • medium

  • large

  • big

  • huge

  • massive

Now you can use a configuration variable called FOMANTIC_BUTTON_STYLE to set global form button size:

from flask import Flask
from flask_fomanticui import FomanticUI

app = Flask(__name__)
fomantic = FomanticUI(app)

app.config['FOMANTIC_BUTTON_SIZE'] = 'small'  # default to ''

there also a parameter called button_size in form related macros (it will overwrite FOMANTIC_BUTTON_SIZE):

{% from 'fomantic/form.html' import render_ui_form %}

{{ render_ui_form(form, button_size='big') }}

What if I have three buttons in one form, and I want they have different styles and sizes? The answer is button_map parameter in form related macros. button_map is a dictionary that mapping button field name to Fomantic button style names. For example, {'submit': 'positive basic'}. Here is a more complicate example:

{% from 'fomantic/form.html' import render_ui_form %}

{{ render_ui_form(form, button_map={'submit': 'primary', 'cancel': 'orange', 'delete': 'negative'}) }}

It will overwrite button_style and FOMANTIC_BUTTON_STYLE.