ExpandableText Component Demo

Basic Example

This is a long text that demonstrates the ExpandableText component. It contains more than 150 characters to show how the preview and expansion functio...

Custom Button Text

Aviation weather briefings are essential for flight safety. Pilots must obtain comprehensive weather information before departure, including METAR reports, terminal aerodrome forecasts (TAFs), winds a...

Different Button Styles

Outline Button

This example uses an outline button style. The outline variant provides a subtle border that makes the button more visible without being too prominent...

Secondary Button

This example uses a secondary button style. The secondary variant provides a subtle background color that differentiates it from the default primary s...

Short Text (No Expansion Needed)

This is a short text that doesn't need expansion.

Usage in Card Component

Flight Operations Manual

Section 5.2 - Weather Procedures

Before any flight operation, pilots must conduct a thorough weather briefing. This includes reviewing current conditions at the departure airport, destination, and alternate airpor...

Combined Button with Expandable Text

Expandable Button with Text

This is an example of the combined button component that includes expandable text functionality. It uses the same chevron icons and animation as the s...

Regular Button (No Expandable Content)

Expandable Button with Different Style

Aviation weather briefings are essential for flight safety. Pilots must obtain comprehensive weather information before ...