Text Pill

For those familiar with the widely-used HTML/Javascript Bootstrap framework, the Focus UI Kit’s text pill, denoted as FUITextPill, bears a resemblance to the badge element within the Bootstrap framework. This element is commonly employed to denote labels or tags on specific artifacts.

The FUITextPill is available in two distinct shapes: a rounded-cornered version and a rectangular one.

The dart file which contains all classes for text pill is located in:

focus_ui_kit/components/typography/fui_text_pill.dart

The FUITextPillTheme class serves as the theme class for the FUITextPill component. Kindly explore this theme class to examine the various settings available for FUITextPill.

Accessing the theme

To access the theme class object, it can be done through:

@override
Widget build(BuildContext context) {
    FUITextPillTheme fuiTextPillTheme =  context.theme.fuiTextPill;
    
    // ...
}

Usage

To display a simple text pill (with default color scheme and size)

FUITextPill(text: 'Tag 1');

Text pill with different sizes

FUITextPill(text: 'Tag 1', pillSize: FUITextPillSize.large);

Text pill with different color scheme

FUITextPill(text: 'Tag 1', fuiColorScheme: FUIColorScheme.cobalt);

Text pill with in rectangle shape

FUITextPill(text: 'Tag 1', pillShape: FUITextPillShape.square);

Parameters

Parameters	Description
Text text	The Text widget for displaying the text. If you have a custom style, do fill in the `style` parameter as well. If not, the text pill will go by the default style.
FUIColorScheme fuiColorScheme	The color scheme for the text pill. The default is `FUIColorScheme.primary`.
FUITextPillShape pillShape	The shape of the text pill. The default is `FUITextPillShape.rounded`.
FUITextPillSize pillSize	The size of the text pill (small, medium or large). The default is `FUITextPillSize.medium`.
Color? backgroundColor	If you prefer a different background color, set this parameter and it will override the default color scheme. For different font color, set it in the `style` parameter of the `text`.

26 March 2025

Focus Theme UI Kit Documentation Help