Skip to content
Polytope
Search

Finds pages and their sections, every token, every .ply class, and every Astro component.

    Menu

    Buttons and tags

    Square labels in exhibit black. They turn tomato under the pointer.

    Stable Class names and props are not expected to change before 1.0.

    In this chapter 14 pages

    Buttons

    HTML
    <div class="ply-cluster">
  <button class="ply-button" type="button">Read the paper</button>
  <button class="ply-button ply-button--secondary" type="button">BibTeX</button>
  <button class="ply-button ply-button--ghost" type="button">Cancel</button>
  <button class="ply-button ply-button--sm" type="button">Small</button>
  <button class="ply-button" type="button" disabled>Disabled</button>
  <button class="ply-button" type="button" aria-busy="true"><span class="ply-loading" aria-hidden="true"><i></i></span>Running</button>
</div>
    • Use one primary button per view, for the action most readers came for. Everything else is secondary or ghost.
    • Label buttons with the action: "Read the paper", "Copy BibTeX", "Run again". Not "Click here" or "Submit".
    • A link that looks like a button is fine: put the classes on an <a>.
    • While an action runs, set aria-busy="true" and add the small machine as a spinner.
    astro
    <Button href="/paper.pdf">Read the paper</Button>
<Button variant="secondary">BibTeX</Button>
<Button busy>Running</Button>
    PropEffectDefault
    variantprimary, secondary, or ghostprimary
    sizemd or smmd
    hrefRenders an <a> instead of a <button>
    iconSquare icon-only button. Give it an aria-label.false
    busyShows the loading machine and sets aria-busyfalse

    Tags

    NeurIPS 2026 Oral New
    HTML
    <div class="ply-cluster">
  <span class="ply-tag">NeurIPS 2026</span>
  <span class="ply-tag ply-tag--solid">Oral</span>
  <span class="ply-tag ply-tag--note">New</span>
</div>

    Tags name a venue, a type, or a topic. They are not buttons; if a tag filters something, make it a real button or link.

    Status

    Idle Training Converged Loss plateau Diverged
    HTML
    <div class="ply-cluster" style="--ply-cluster-gap: 1.5rem">
  <span class="ply-status ply-status--idle">Idle</span>
  <span class="ply-status ply-status--running">Training</span>
  <span class="ply-status ply-status--done">Converged</span>
  <span class="ply-status ply-status--warning">Loss plateau</span>
  <span class="ply-status ply-status--error">Diverged</span>
</div>

    Status always pairs a mark with a word, so it reads without color: an empty ring for idle, a pulsing ball for running, a check, a triangle, and a cross. Use it in demo status lines and experiment tables.

    astro
    <Status state="running">Training</Status>

    When a script changes the status, add live so screen readers announce it: <Status state="running" live>. Inside an app shell, leave it off; the status bar is already a live region.