TopBar

Navbar + FloatMenu

SideBar

TabBar + TabItem

NavItems, SideBarItems e DotIndicator

Buttons

ActionButton - Variants

Primary

Secondary

Outline

Ghost

Danger

Success

ActionButton - Sizes

IconButton - Categories

IconButton - Sizes

Typography

Text Variants

h1

The quick brown fox jumps over the lazy dog.

h2

The quick brown fox jumps over the lazy dog.

h3

The quick brown fox jumps over the lazy dog.

h4

The quick brown fox jumps over the lazy dog.

h5
The quick brown fox jumps over the lazy dog.
body-h1

The quick brown fox jumps over the lazy dog.

body-h2

The quick brown fox jumps over the lazy dog.

body-h3

The quick brown fox jumps over the lazy dog.

body-h4

The quick brown fox jumps over the lazy dog.

body-h5

The quick brown fox jumps over the lazy dog.

body-h6

The quick brown fox jumps over the lazy dog.

Divider

Above divider
Below divider

Avatar

Avatar
Avatar
Avatar
Avatar

IconColor + Assets

Roxo
Rosa
Laranja
Azul
Verde
Gray
PortuguêsPortuguês
MandarimMandarim
FrancêsFrancês
EspanholEspanhol
InglêsInglês
AlemãoAlemão
FeedbackFeedback
RobotRobot
Waving handWaving hand
BooksBooks
Question markQuestion mark
RunRun

Cards

CardSectionHeader

Esta semana

3 horas 13 min

Esta semana

3 horas 13 min

CardContent

Lorem Ipsum

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

Lorem Ipsum

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

CardIconLabel

Primary
Secondary
Tertiary
Quartenary
Success
Danger
Brand

CardText

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

Lorem ipsum tortor fermentum eu duis ultricies dolor leo nulla.

SummaryMetric

6 min
1/4

FavIcon

CourseHeader

Nível A1: Beginner

Label
0min

Bem-vindo(a)! Prepare-se para aprender o básico do inglês de forma prática e divertida.

IconText

Lorem ipsum dolor sit amet consectetur. Dolor dolor at nisl viverra.

Lorem ipsum dolor sit amet consectetur. Dolor dolor at nisl viverra.

LoadText

Carregando atividade...

Você pode explorar o app enquanto isso...

Carregando atividade...

Você pode explorar o app enquanto isso...

ControllerBottomsheet

CardHorizontal

Meta diária

12 dias

Meta diária

12 dias

CardAudioPlayer

Pressione o play

00:00
00:13
Placeholder

Ouvindo...

00:00
00:13
Placeholder

O que você ouviu?

00:00
00:13
Digite sua resposta

CardFeedback

Correct

Você digitou:

"How are you"

Resposta correta:

"How are you"
Incorrect

Você digitou:

"How are you"

Resposta correta:

"How are you"

CardFeedbackSummary

Tempo

6 min
12%

mais lento

Tempo

6 min
12%

mais rápido

Acertos

1/4
12%

mais lento

Acertos

1/4
12%

mais rápido

Flashcards

☂️

Umbrella

Guarda-Chuvas

Back side

  • Lorem ipsum dolor sit amet consectetur.
  • Lorem ipsum dolor sit amet consectetur.
  • Lorem ipsum dolor sit amet consectetur.

CardsIconText

Praticar com IA

Praticar com IA Lingopass

Media

Player

PlayerBar

00:00
00:13
00:03
00:13
00:06
00:13
00:10
00:13

ItemController

ControllerContainer

Control Elements

AudioPlayer

00:00
00:00
00:00
00:00

MediaPlayer

00:00
00:00
00:00
00:00

Feedback & Loading

ProgressBar

Concluído
Andamento
Atrasado
Erro

ProgressHeader

1/10
3/10

RingProgress

5min/30min
15min/30min
22min/30min

SemiCircleProgressBar

120/500
300/500

StepperContainer

3 de 5

Spinner + LogoAnimation

Gerando...
Carregando...
Processando...
Logo

StatusBadge

CorrectWarningErrorBrand

Snackbar

2 chats apagados
Falha ao salvar

SnackbarProvider

Forms

InputField

Nunca compartilharemos seu email.

Email invalido.

SearchBar

Select

CheckBox

RadioButton

Switch

DropDown

FilterChip

SelectionChip

Counter

1

Slider

5
10
15
30
1h

SwitchContainer

Lists

ItemSearchBar + List

  • InglêsPT-BR
  • EspanholES
  • FrancêsFR

Chat & Messaging

MessageBubble

Is there a restaurante near the tower?
You can start with the Eiffel Tower.Você pode começar com a Torre Eiffel.
Is there a restaurante near the tower?
You can start with the Eiffel Tower.

MessageActions

SendButton, Mic, Waves

MessageInput

MessageInputContainer

ChatMessage

Is there a restaurante near the tower?
You can start with the Eiffel Tower.Você pode começar com a Torre Eiffel.

ScenarioHeader

Lorem ipsum dolor sit amet consectetur. Aliquet adipiscing montes eu faucibus in etiam dui.

MessageIHistoriaInterativa

Is there a restaurante near the tower?
AI
You can start with the Eiffel Tower.

Lorem ipsum dolor sit amet consectetur. Est lorem at volutpat neque egestas bibendum.

Overlays

Modal

Dialog