Bubble component is mainly designed to represent a single short chunk of information, be it a text message, a status message, a short interaction, etc.
Bubble has three layout styles:
Wide. Note, these styles have different padding values in comparison to
This state is used to differ
Bubble background in order to display different information. This is used to differentiate two contents, for example messages from one member to another.
In the case where
Bubble is encapsulating some sort of view that includes any amount of actions (
Buttons), it is recommended to stack them on top of each other, allowing the buttons to have the full width of the container.
Bubble element can also have an additional
footer container that has the same content encapsulation properties as
Footer container may be used for interpreting the content within the bubble.
Constructed from self elements
Bubble’s footer can be constructed from self elements:
Bubble’s footer can be formed from any elements thus overriding default paddings and spacings.
<bubble text="Hello!" footer="John Johnson"> <cell body="Hello again!"> </bubble>