---
name: MagaHeader
route: /components/maga-header
menu: Components ⚡️
---

import { Playground, Props } from "docz";
import { Form, Grid, Button } from "semantic-ui-react";
import MagaHeader from "../index.tsx";
import "../styles/index.css"

# MagaHeader

Header padrão

    import { MagaHeader } from 'maga-components'

## Props

<Props of={MagaHeader} />

## Uso básico

<Playground>
  <MagaHeader
    title="Categorias"
    description="Adicione as categorias dos produtos"
    icon="wpforms"
  />
</Playground>

## Com Action

<Playground>
  <MagaHeader
    title="Categorias"
    description="Adicione as categorias dos produtos"
    icon="wpforms"
    action={
      <Form>
        <Grid divided="vertically" verticalAlign="bottom">
          <Grid.Row columns={2}>
            <Grid.Column width={16}>
              <Button
                className="ref-btn-save"
                content="Nova"
                icon="plus"
                labelPosition="left"
                primary
              />
            </Grid.Column>
          </Grid.Row>
        </Grid>
      </Form>
    }
  />
</Playground>