web_ribbon

Some information about a record is state, not data: this contact is archived, this invoice is paid, this event is cancelled. Odoo's convention for shouting state without using a field slot is the diagonal corner ribbon, and every one of them is this widget.

Because it is a view widget rather than a field widget, it appears in XML as a <widget> element, not a <field>. It has no value, saves nothing, and exists purely to render. What it shows and when it shows are driven entirely by the attributes you give it and an invisible condition over the record's fields.

The ribbon is the difference between a user noticing a record's state and missing it. An archived supplier that still looks active gets purchase orders; a paid invoice that does not visibly say so gets a second reminder call. The diagonal banner is deliberately unmissable, which is why core reserves it for states that change how you should treat the whole record.

Used well, ribbons also carry your process language. A Blocked ribbon on quality-hold products, a VIP ribbon on key accounts, a Do not invoice ribbon on internal projects: each is a one-line view change that spares a training slide and a support thread. The discipline is scarcity. One ribbon on a form is a signal; three are wallpaper, and the widget will happily render all three if told to, overlapping.

The classic Archived ribbon

<widget name="web_ribbon" title="Archived"
        bg_color="text-bg-danger"
        invisible="active"/>

Visible only when active is False. Place it as the first element inside the <sheet> so it anchors to the corner.

State ribbon with a tooltip

<widget name="web_ribbon" title="Paid"
        tooltip="Fully paid on the payment date"
        invisible="payment_state != 'paid'"/>

Default green, hover text for the why. Any field used in the invisible expression must be present in the view, invisible fields count.

Two mutually exclusive ribbons

<widget name="web_ribbon" title="Cancelled" bg_color="text-bg-danger"
        invisible="state != 'cancel'"/>
<widget name="web_ribbon" title="Done"
        invisible="state != 'done'"/>

Both declared, conditions guaranteeing only one renders at a time. This is the core pattern for state ribbons.

One rendering rule in the source is documented nowhere else: the ribbon resizes itself by text length. Up to 10 characters renders full size; past 10 characters the component adds its medium class; past 15 it adds the small one. That is why Archived looks bigger than a custom Pending validation ribbon, and why very long ribbon text looks cramped no matter the color.

The practical guidance follows directly: keep ribbon text within about 15 characters, and treat anything longer as a sign the message belongs in a banner or an activity, not a corner ribbon. Translations count too; a 9-character English title can become a 19-character German one and drop two sizes.

Also read from the source: the text attribute is a legacy alias that extractProps accepts when title is absent. You will meet it in older custom modules; write title in anything new.

Odoo 20 is expected at Odoo Experience in Brussels, 24 to 26 September 2026. We read the widget's file on the public development branch at the time of writing.

No changes: attributes, defaults, the auto-sizing thresholds and the registration are identical to Odoo 19. The only movement is internal, to the new Owl props syntax, which affects JavaScript patches and nothing in XML. We re-verify this page once Odoo 20 ships.